html - 获取带有居中文本的全 Angular Bootstrap 导航栏

Question

我正在创建我的新网站，我想将我的导航栏设置为全 Angular ，并使我的文本居中。 一切都很好，但我没有克服设置全 Angular 。

body {
  background-color: #4D4D4D;
}

.navbar-collapse {
  text-align: center;
  background-color: #1B1B1B;
}

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

ul.nav.navbar-nav>li>a {
  color: #C44632;
}

#content {
  width: 70%;
  margin: 0 auto;
  background-color: #2E2E2E;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <nav class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Accueil</a></li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Optiques</a></li>
            <li class="divider"></li>
            <li><a href="#">Monture</a></li>
            <li class="divider"></li>
            <li><a href="#">Capteurs Photo</a></li>
            <li class="divider"></li>
            <li><a href="#">Accessoires</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Planétaire</a></li>
            <li class="divider"></li>
            <li><a href="#">Ciel Profond</a></li>
            <li class="divider"></li>
            <li><a href="#">Autres</a></li>
          </ul>
        </li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Données Météo</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Qui suis-je ?</a></li>
      </ul>
    </div>
  </nav>
</div>

为了获得全宽导航栏缺少什么？

Answer 1

一切都很好，你只需要输入你的 <div class="container">里面<nav> .

试试这个:

body {
    background-color: #4D4D4D;
}

.navbar-collapse {
  text-align:center;
  background-color: #1B1B1B;
}

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

ul.nav.navbar-nav > li > a {
    color : #C44632;
}

#content {
    width: 70%;
    margin: 0 auto;
    background-color: #2E2E2E;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


                <nav class="navbar navbar-inverse">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="container">
                    <div class="navbar-header">
                        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <!-- Collection of nav links, forms, and other content for toggling -->
                    <div id="navbarCollapse" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Accueil</a></li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Matériel <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Optiques</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Monture</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Capteurs Photo</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Accessoires</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Photographies <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Planétaire</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Ciel Profond</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Autres</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Article</a></li>
                            <li><a href="#">Données Météo</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Qui suis-je ?</a></li>
                        </ul>
                    </div>
                </div>
            </nav>