使用居中文本獲取引導程序導航欄全角

Question

我正在創建我的新網站，並且希望將我的導航欄全角度設置爲居中文本。 一切都很好，但我沒有克服設置全角。

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>

Answer 2

變化：

<div class="container"> 

要：

<div class="container-fluid"> 

和CSS：

.container-fluid { 
    padding:0; 
} 

Answer 3

引導.container對於中等設備具有固定寬度（1170px），您需要將其設置爲100%;

PS：添加一個自定義類來覆蓋引導程序的CSS是一種很好的做法。

.custom-container{ 
    width:100%; 
    padding:0; 
} 

body { 
 
    background-color: #4D4D4D; 
 
} 
 

 
.custom-container { 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
.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" /> 
 

 
<style> 
 
    .custom-container { 
 
    width: 100%; 
 
    padding: 0; 
 
    } 
 
</style> 
 

 
<div class="container custom-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 4

最簡單的辦法是把你的<nav>外<div class="container">因爲<div class="container">有它自己的樣式（填充）