在没有响应崩溃的情况下使用Bootstrap 3导航栏的最佳方法 [英] Best way to use Bootstrap 3 Navbar without responsive collapse
问题描述
我正在尝试在Bootstrap 3中创建一个不会折叠的简单Navbar-这里不需要响应,因为我们只在左侧的+号上有一个简单的标题.
I'm trying to create a simple Navbar in Bootstrap 3 that doesn't collapse - responsive isn't necessary here because we just have a simple title on the left + button on the right.
我的目标是使标题+按钮在所有分辨率下始终显示相同.像这样:
My goal is to have the title + buttons always appear the same for all resolutions. Something like this:
<div class="navbar navbar-fixed-top">
<form class="navbar-form navbar-right">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</form>
<a class="navbar-brand" href="#">Title Here</a>
</div>
我已经尝试了文档中的多种组合.并且此文章概述了如何使用新的.nav-header类.我尝试复制.nav-header中的元素-并尝试覆盖BS3媒体查询样式.
I've tried numerous combinations from the documentation. And this post outlines how to use the new .nav-header classes. I've tried duplicating the elements inside .nav-header - and also tried overriding the BS3 media query styles.
是否有更简单的方法来使用Navbar而不会崩溃?
Is there an easier way to use the Navbar without collapsing?
推荐答案
我能找到的最好方法是使用2个navbar-header
容器,然后使用pull-left
和pull-right
容器,因为它们没有任何关联响应式媒体查询.
The best way I could find is to use 2 navbar-header
containers, and then use pull-left
and pull-right
since they aren't tied to any responsive media queries..
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Title Here</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="btn btn-default navbar-btn">Button 1</button>
<button type="button" class="btn btn-default navbar-btn">Button 2</button>
</div>
</div>
Bootply上的演示: http://bootply.com/74912
Demo on Bootply: http://bootply.com/74912
这篇关于在没有响应崩溃的情况下使用Bootstrap 3导航栏的最佳方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!