![tried]( "tried")
本文介绍了在没有响应式折叠的情况下使用 Bootstrap 3 Navbar 的最佳方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我正在尝试在 Bootstrap 3 中创建一个不会折叠的简单导航栏 - 此处不需要响应，因为我们在左侧 + 右侧按钮上只有一个简单的标题.
我的目标是让标题 + 按钮在所有分辨率下始终显示相同.像这样:
<form class="navbar-form navbar-right"><button class="btn btn-default">按钮 1</button><button class="btn btn-default">Button 2</button></表单><a class="navbar-brand" href="#">Title Here</a>
我尝试了 文档 中的多种组合.这篇文章概述了如何使用新的 .nav-header 类.我尝试复制 .nav-header 中的元素 - 还尝试覆盖 BS3 媒体查询样式.
有没有更简单的方法来使用导航栏而不折叠?
解决方案
我能找到的最好方法是使用 2 个 navbar-header 容器，然后使用 pull-left 和 pull-right 因为它们不绑定到任何响应式媒体查询..
<div class="navbar-header pull-left"><a class="navbar-brand" href="#">Title Here</a>
<div class="navbar-header pull-right"><button type="button" class="btn btn-default navbar-btn">按钮1</button><button type="button" class="btn btn-default navbar-btn">Button 2</button>
Bootply 上的演示:http://bootply.com/74912
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>
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.
Is there an easier way to use the Navbar without collapsing?
解决方案
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>
Demo on Bootply: http://bootply.com/74912
这篇关于在没有响应式折叠的情况下使用 Bootstrap 3 Navbar 的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..