组件导航链接、表单、按钮或文本:左右侧对齐浮动 key:navbar-left navbar-right pull-left pull-right - Bootstrap 导航条

组件导航链接、表单、按钮或文本:左右侧对齐浮动

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 组件导航链接、表单、按钮或文本:左右侧对齐浮动

通过添加 .navbar-left.navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

这些类是 .pull-left.pull-right 的 mixin 版本,但是他们被限定在了媒体查询(media query)中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

向右侧对齐多个组件

导航条目前不支持多个 .navbar-right 类。为了让内容之间有合适的空隙,我们为最后一个 .navbar-right 元素使用负边距(margin)。如果有多个元素使用这个类,它们的边距(margin)将不能按照你的预期正常展现。

我们将在 v4 版本中重写这个组件时重新审视这个功能。

组件对齐方式

您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。
下面的实例演示了这点:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 组件对齐方式</title>  
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="/scripts/jquery.min.js"></script>  
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <nav class="navbar navbar-default" role="navigation"> 
  12.     <div class="container-fluid"> 
  13.     <div class="navbar-header"> 
  14.         <a class="navbar-brand" href="#">bootstrap教程</a> 
  15.     </div> 
  16.     <div> 
  17.         <!--向左对齐--> 
  18.         <ul class="nav navbar-nav navbar-left"> 
  19.             <li class="dropdown"> 
  20.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  21.                     Java 
  22.                     <b class="caret"></b> 
  23.                 </a> 
  24.                 <ul class="dropdown-menu"> 
  25.                     <li><a href="#">jmeter</a></li> 
  26.                     <li><a href="#">EJB</a></li> 
  27.                     <li><a href="#">Jasper Report</a></li> 
  28.                     <li class="divider"></li> 
  29.                     <li><a href="#">分离的链接</a></li> 
  30.                     <li class="divider"></li> 
  31.                     <li><a href="#">另一个分离的链接</a></li> 
  32.                 </ul> 
  33.             </li> 
  34.         </ul> 
  35.         <form class="navbar-form navbar-left" role="search"> 
  36.             <button type="submit" class="btn btn-default"> 
  37.                 向左对齐-提交按钮 
  38.             </button> 
  39.         </form> 
  40.         <p class="navbar-text navbar-left">向左对齐-文本</p> 
  41.         <!--向右对齐--> 
  42.         <ul class="nav navbar-nav navbar-right"> 
  43.             <li class="dropdown"> 
  44.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  45.                     Java <b class="caret"></b> 
  46.                 </a> 
  47.                 <ul class="dropdown-menu"> 
  48.                     <li><a href="#">jmeter</a></li> 
  49.                     <li><a href="#">EJB</a></li> 
  50.                     <li><a href="#">Jasper Report</a></li> 
  51.                     <li class="divider"></li> 
  52.                     <li><a href="#">分离的链接</a></li> 
  53.                     <li class="divider"></li> 
  54.                     <li><a href="#">另一个分离的链接</a></li> 
  55.                 </ul> 
  56.             </li> 
  57.         </ul> 
  58.         <form class="navbar-form navbar-right" role="search"> 
  59.             <button type="submit" class="btn btn-default"> 
  60.                 向右对齐-提交按钮 
  61.             </button> 
  62.         </form> 
  63.         <p class="navbar-text navbar-right">向右对齐-文本</p> 
  64.     </div> 
  65.     </div> 
  66. </nav> 
  67.   
  68. </body>  
  69. </html>  

 


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)