Question

我一直在学习使用bootstrap，所以我决定用它来创建一个Navbar。所以，我决定尝试集中它，所以我在网上寻找解决方案，但没有一个工作。那么请你告诉我该怎么做。

HTML：

</head>
<body>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Items <span class="sr-only"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Item 1</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Item 2 </a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Item 3</a></li>
            </ul></li>
        </ul>
    </div>

Current CSS:
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

Answer 1

如果您使用的是bootstrap，为什么要将当前的CSS用于导航栏？只需使用bootstrap提供的东西。

我不确定您是将文本居中放在导航栏中还是将导航栏集中在一起，但这可以在bootstrap's website上找到

<body>

<div class="container">

  <!-- Static navbar -->
  <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="#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>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

Answer 2

看起来你拥有的CSS和你拥有的代码都可以正常工作。只需将div包装在nav元素中即可。

<nav class="navbar navbar-default" role="navigation">
    <div class="collapse navbar-collapse">
    ... Rest of Your Code ...
    </div>
</nav>

Answer 3

尝试使用此CSS代码来解决您的问题：

.navbar-collapse .navbar-nav{
    margin: 0 auto;
    width: 300px; /*(example - [width: auto; is wrong])*/
}

.navbar-collapse{
  margin: 0 auto;
}
.navbar-collapse li{
  margin: 0 auto;
}

如何使用css使导航栏居中

3 个答案: