Question

我一直试图将我的Bootstrap导航栏上的链接/标签集中在一个星期以上，而且它正在进行中。在这里完成了每个类似的问题，绝对没有任何工作。我认为我已经在某条线上加倍规则，或者实际上并没有针对正确的事情。

它是Dreamweaver上的基本Bootstrap导航栏代码段。我已经设法定制了颜色/字体/大小，但却无法让中间人坐下来。

＆＃13;

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" 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 class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

Answer 1

尝试添加这些类

CSS

.navbar-header
{
  float:none;
}

.navbar-nav li
{
  float:none;
  display:inline-block;
}

希望这会有所帮助..

Answer 2

您可以使用 Flexbox 执行此操作：

.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
}

Answer 3

基本上使用float:left和navbar-header中的li启动，因此父div不接受中心对齐或自动边距更新css部分，其中包含以下代码段或检查小提琴链路

在第一个选项中，您将获得嵌套类，以便仔细查看css和html。

<强> 1st option with nesting class to get center

在第二个选项中，您将只获得css更改，因此请仔细检查css。

获得中心的第二个选项

<强> 2nd option to get center

更新css部分，我使用inline-flex获取中心

＆＃13;

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header {
  float: none; /* Add this */
}

.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

＆＃13;

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" 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 class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

.navbar.navbar-default {
  background-color: #B3C5D7;
  background-attachment: fixed;
  position: fixed;
  width: 100%;
  border-radius: 0px;
  float: none;
  text-align: center;
}

.nav.navbar-nav {
  font-size: x-large;
  width: 100%;
  display: inline-block;
}

/* Add this css part */

.navbar-header.center-items {
  float: none;  /* Add this */
}

.navbar-center.navbar-nav li {
  display: inline-flex;  /* Add this */
  float: none;  /* Add this */
}

＆＃13;

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header center-items"> <!--Add class -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" 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 class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav navbar-center">  <!--Add class -->
          <li class="active"><a href="index.html">HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="ourcarefactor.html">OUR CARE FACTOR</a></li>
          <li><a href="facilities.html">FACILITIES</a></li>
          <li><a href="functions.html">FUNCTIONS</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

＆＃13;

Bootstrap Navbar链接不会中心

3 个答案: