怎样使bootstrap导航栏始终显示成一行?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样使bootstrap导航栏始终显示成一行?相关的知识,希望对你有一定的参考价值。

我用bootstrap做了个导航栏 在手机上总是显示成2行 怎么能让它一直显示成一行啊 ?

操作步骤:

创建一个默认的导航栏的步骤如下:

向 <nav> 标签添加 class .navbar、.navbar-default。

向上面的元素添加 role="navigation",有助于增加可访问性。

向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

实例演示:

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 默认的导航栏</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="#">W3Cschool</a>   </div>   <div>      <ul class="nav navbar-nav">         <li class="active"><a href="#">ios</a></li>         <li><a href="#">SVN</a></li>         <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown">               Java               <b class="caret"></b>            </a>            <ul class="dropdown-menu">               <li><a href="#">jmeter</a></li>               <li><a href="#">EJB</a></li>               <li><a href="#">Jasper Report</a></li>               <li class="divider"></li>               <li><a href="#">分离的链接</a></li>               <li class="divider"></li>               <li><a href="#">另一个分离的链接</a></li>            </ul>         </li>      </ul>   </div></nav></body></html>

参考技术A 不使用折叠式,也就是不使用collapse navbar-collapse这个样式,然后强制把整个导航栏占100%(也就是.col-xs-12),否则折叠起来还是竖式,这是bootstrap的.css决定的 参考技术B 工具/原料
bootstrap框架必须有, 还有就是基础的搭建模版, 如果不清楚, 请看"系列一"的文章.
方法/步骤
这里bootstrap使用了html5的一个新的标签nav.
<nav>标签定义导航链接的部分.
使用了样式. .navbar样式标识的是一个导航条.
其中.navbar又包含了:.navbar-header, .navbar-toggle, .navbar-brand
下面先给出一个带有链接的, 而且还支持移动端的例子代码.

bootstrap导航条的可选页面, 有两种(可自己写css定义), 第一种默认的.navbar-default, 效果是:白色的背景黑色的字, 第二种是.navbar-inverse, 效果是:黑色的背景加上白色的字. 只需要选中自己想要的效果即可, 这里需要注意的地方有一点. 就是如果想要这两种默认的其他效果, 就需要自己去实现样式, 可以查看css的源代码, 然后去看.navbar-inverse怎么实现, 然后模仿实现即可, 这是一个笨办法, 还有另外一种方式, 就是使用less, 重新写样式, 因为bootstrap可运行的样式, 也是用less构建的, 也有sass版的, 这里只是简单的介绍一下, 定义好的样式, 这些在以后的经验中还会继续提到.

上面定义了一个简单的带有链接的导航条, 然后相信的说明一下, 这个简单的代码.
1.导航条样式的开始. 这里需要注意一点: 为了增强可访问性(和浏览器的兼容性),务必给每个导航条加上 role="navigation" 属性。方便bootstrap中js处理导航条的显示样式.
2.导航条的页头, 也就是显示在最前面的导航条标题. 这个是bootstrap中的一个带有图标的标签, 然后这里也是在移动端, 就是小于768设备显示的效果.
3.这部分是移动端折叠的部分, 也是为了能够更好的展现页面在移动端.

导航条上除了能够加上一些链接之外, 还可以加上一些按钮, 和一些表单, 例如: 搜索框.
举例子: 按钮, 直接写button标签属性即可. 需要注意的是, 一定要在button的样式上加上.navbar-btn 这样你看到的效果才是比较美观的.

不仅还有按钮, 还有一些下拉列表, 这里, 下拉列表, 就是bootstrap中的下拉. 使用一下的代码来展示下拉样式.

在这里, 如果我们想要把其中的按钮, 链接或者文字, 放到右边, 应该怎么做呢? 我们可以使用bootstarp中的.navbar-left 和 .navbar-right 来做到按钮, 下拉菜单等元素的居左和居右. 需要注意的是, 这个样式只能写在ul中. 看实例, 就明白了.

有时候, 我们需要把我们的导航条固定在顶端, 和固定在底部. 这个的效果, 在bootstrap中, 很容易就实现了, 首先需要用到固定顶端的样式..navbar-fixed-top 和固定底端的样式.navbar-fixed-bottom

框架的功能样式, 只是针对那些前端技术不是很好, 又想做出不错样式的人来说, 是最好的选择。追问

你说的我都看了 ,没有解决我问的那个问题!谢谢你的回答!

以上是关于怎样使bootstrap导航栏始终显示成一行?的主要内容,如果未能解决你的问题,请参考以下文章

使 Bootstrap 3.0 NavBar 内容始终折叠

Bootstrap 页脚导航栏问题

如何使导航栏全角?

Bootstrap 4中的导航栏药丸颜色以填充整个高度

使导航栏可堆叠(引导程序)

iOS:使导航栏在 UITableViewController 中始终可见