Question

我有Bootstrap提供的以下导航栏

导航栏的代码是：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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 id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}

.navbar-nav>li {
 float: left;
 }

.nav>li {
position: relative;
display: block;
}


.navbar-nav {
float: left;
margin: 0;
}

我想将3个链接集中在一起。我的尝试是做

.navbar-default .navbar-collapse {
text-align: center;
}

我想让3个链接居中，但它似乎不能与text-align一起使用。我已经尝试使margin-left和margin-right = 0，但这也不起作用。

感谢任何帮助。

Answer 1

HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="pull-left"><a href="#">Dashboard</a></li>
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
        <li class="social pull-right"><a href="#">Social Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS：

  .navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }
  }

https://codepen.io/davidcochran/pen/rcHae

Answer 2

你必须在css中做一些改变。

保持此

.navbar-default{
  text-align: center;
}

从.nav-bar-nav＆gt;中移除浮动li并添加此

.navbar-nav > li {
 display: inline-block
}

Answer 3

阻止你这样做的原因是 .navbar-nav 在文档中浮动。您应该摆脱浮动属性并使其成为内联元素，以使其居中对齐。（内联块）

请参阅fiddle here

<强> HTML

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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 id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<强> CSS

.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}

.navbar-nav>li {
 float: left;
 }

.nav>li {
position: relative;
display: block;
}

.navbar {
  text-align: center;
}
.navbar-nav {
  display: inline-block;
float: none !important;
margin: 0;
}

Answer 4

在页面中添加以下CSS

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

.navbar .navbar-collapse {
    text-align: center;
}

查看此Center content in responsive bootstrap navbar了解详情。

Answer 5

＆＃13;

#navbar {
    margin-left: 300px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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 id="navbar" class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../navbar/">Default</a></li>
        <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

＆＃13;

Answer 6

以下是两个示例，具体取决于它应如何在较小的设备上显示。

示例1 ：链接中心高于768px（非移动设备）。

＆＃13;

@media (min-width: 768px) {
  .navbar.navbar-default {
    text-align: center;
  }
  .navbar.navbar-default .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
        <li><a href="#">Four</a>
        </li>
        <li><a href="#">Five</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<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>

＆＃13;

示例2 ：以所有视口为中心

＆＃13;

.navbar.navbar-inverse {
  text-align: center;
}
@media (min-width: 768px) {
  .navbar.navbar-inverse .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
        <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="navbar-collapse collapse" id="navbar2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
        <li><a href="#">Four</a>
        </li>
        <li><a href="#">Five</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<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>

＆＃13;

如何在导航栏中居中三个链接？

6 个答案: