Question

如何使用Bootstrap将导航栏元素带到中心？

HTML

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
          <div>
              <ul class="nav navbar-nav">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">Contact</a></li>
               </ul>
           </div>
    </nav> 
</body>

这是我在JSFiddle中正在处理的整个代码。

Answer 1

<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation" align="center">

将align属性添加到“nav”标记，并为其指定值“center”。

Answer 2

这是您的navbar元素的标记和CSS。

Jsfiddle

<强> HTML：

<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><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Portfolio</a></li>
                   <li><a href="#">Contact</a></li>
                 </ul>
            </div><!--/.nav-collapse -->
       </div><!-- container -->
  </div><!-- navbar-inner -->
</div><!--  navbar navbar-fixed-top -->

<强> CSS：

 .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;
}

Answer 3

https://jsfiddle.net/zer00ne/y8qweyqv/

body {
  position: relative;
  height: 100vh;
  width: 100vw;
}
.navbar {
  background-color: #000000;
  position: absolute;
  top: calc(50% - 3em);
  border: 3px ridge red;
  border-radius: 12px;
  height: 6em;
  margin: 0 auto;
  width: 100%;
  
}
.linx {
  display: table;
  color: #808080;
  list-style-type: none;
  text-align: center;
  width: 100%;
  overflow: hidden;
  padding: 1.5em .25em;
  
}
.linx > li {
  display: table-cell;
  color: #808080 !important;
  vertical-align: middle;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}
a {
  color: #FFF  !important;
}
a:hover {
  color: red !important;
  text-decoration: none !important;
  outline: 3px solid red;
}
.whole{
    opacity:0.5;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:-1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <nav class="navbar " role="navigation">
    <div>
      <ul class="linx">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>


</body>

Answer 4

可以使用display: inline;，然后只需设置一个padding-right。

Answer 5

以下两个可能对您有所帮助的示例。一个在shared_ptr上均匀分配链接，另一个以container为中心。

示例1

＆＃13;

ul

＆＃13;

.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: red;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-inverse .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-inverse .navbar-nav > li > a {
    text-align: center;
  }
}

＆＃13;

示例2

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

.navbar.navbar-inverse .navbar-nav > li > a:hover {
  color: red;
}
.navbar.navbar-inverse .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar.navbar-inverse .navbar-collapse {
  text-align: center;
}

＆＃13;

Answer 6

不确定问题，但您是否希望导航栏列表项位于单行中心，如下所示？

为此，请将ul li列表的规则更具体，并将显示更改为inline-block，如下所示：

.navbar-fixed-top ul li{
display:inline-block;
color:#808080 !important;
}

它的作用是覆盖核心Bootstrap中的默认.navbar和.navbar-fixed-top ui li属性。如果未添加.navbar-fixed-top，则默认核心Bootstrap CSS更具体，因此具有更高的优先级。

JS Fiddle Updated

如何使导航栏元素居中？

6 个答案: