在 Twitter Bootstrap 中居中导航

Posted 2023-03-06

【中文标题】在 Twitter Bootstrap 中居中导航

【英文标题】：Center the nav in Twitter Bootstrap

【发布时间】：2012-06-11 23:02:41

【问题描述】：

我希望能够将页面的导航死点居中并使其在不同的分辨率下保持居中。我不想使用偏移量将其推过或向左边缘，因为这只会在不同的浏览器宽度中搞砸。这是我正在搞乱的典型栏，但 ul 总是左对齐。

     <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
           <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse">
                     <ul class="nav">
                          <li class="active"><a href="#">Menu</a></li>
                          <li><a href="#">On Tap</a></li>
                          <li><a href="#">Shows</a></li>
                          <li><a href="#">Surfwear</a></li>
                          <li><a href="#" >Contact</a></li>
                     </ul>
                </div><!--/.nav-collapse -->
           </div><!-- container -->
      </div><!-- navbar-inner -->
 </div><!--  navbar navbar-fixed-top -->

【问题讨论】：

你能更新一个jsfiddle.net 演示吗？

jsfiddled：problem。顶部answer（引导程序 2.3.2）

【参考方案1】：

您可以将.navbar设为固定宽度，然后将其左右边距设置为auto。

Demo

.navbar
    width: 80%;
    margin: 0 auto;
​

【讨论】：

使导航栏居中而不是导航栏中的内容

简单。这是一个对我有用，另一个没有。

【参考方案2】：

Modify twitter bootstrap navbar 可能重复。 我想这就是你要找的东西（复制）：

.navbar .nav,
.navbar .nav > li 
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;


.navbar-inner 
  text-align:center;

如链接答案中所述，您应该使用这些属性创建一个新类并将其添加到导航 div。

【讨论】：

这很好用，但我需要它关闭桌面以外的所有宽度。只需将这些内容设置为 :none 在媒体查询上？

如果您希望它适用于 Bootstrap 3；将.navbar-inner 更改为.navbar-collapse

【参考方案3】：

对于在 Bootstrap 3 中需要此功能的任何人来说，现在都容易多了。

新的nav-justified 类可用于将所有导航栏链接居中。

http://www.bootply.com/g3g125MLGr

<div class="navbar">
  <ul class="nav nav-justified" id="myNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

或者使用一点 CSS，您可以只将品牌/徽标居中，并保持左/右链接分开..

http://www.bootply.com/3iSOTAyumP

【参考方案4】：

http://www.bootply.com/3iSOTAyumP 在此示例中，折叠按钮不可点击，因为 .navbar-brand 在前面。

http://www.bootply.com/RfnEgu45qR 有一个更新版本，其中折叠按钮实际上是可点击的。

【参考方案5】：

.navbar-right  
    margin-left:auto;
    margin-right:auto; 
    max-width :40%;   
    float:none !important;

只需复制此代码并根据需要更改max-width

【参考方案6】：

我更喜欢这个：

<nav class="navbar">
  <div class="hidden-xs hidden-sm" style="position: absolute;left: 50%;margin-left:-56px;width:112px" id="centered-div">
    <!-- this element is on the center of the nav, visible only on -md and -lg -->
    <a></a>
  </div>

  <div class="container-fluid">
    <!-- ...things with your navbar... -->
      <div class="visible-xs visible-sm">
        <!-- this element will be hidden on -md and -lg -->
      </div>
    <!-- ...things with your navbar... -->
  </div>
</nav>

元素完全居中，并且会在某些屏幕尺寸上隐藏（例如，我在 -xs 和 -sm 上没有位置）。我从 Twitter 的实际导航栏中得到这个想法

【参考方案7】：

使用基本导航引导的代码

<!--MENU CENTER`enter code here` RESPONSIVE -->

  <div class="container-fluid">
        <div class="container logo"><h1>LOGO</h1></div>
      <nav class="navbar navbar-default menu">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar2"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
           </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="defaultNavbar2">
            <ul class="nav nav-justified" >
              <li><a href="#">Home</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  <!-- END MENU-->

【参考方案8】：

对于 Bootstrap v4，请检查：

https://v4-alpha.getbootstrap.com/components/pagination/#alignment

只在 ul.pagination 中添加类：

<nav">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>