ブートストラップでnavbarをセンターしたい

ここに私のコードですが、私はObiwanを手伝ってくれました。私はコンテナタグをやろうとしました。ブートストラップでnavbarをセンターしたい

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- This sets up bootstrap 3--> 
 
    <meta charset="utf-8"> 
 
    <meta name="veiwport" content="width-device-width, initial-scale-1"> 
 
    <!-- this sets initial zoom when page is loaded --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <!-- links css --> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Lauren Neely</a> 
 
     </div> 
 

 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">Gallery</a> 
 
      </li> 
 
      <li><a href="#">Sketchbook + Misc</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
    </nav> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-02-14 codehowdy

あなたのCSSに追加することができます：float: noneと

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

を、あなたの.navbar-nav

に中央の整列を設定し、@media (min-width: 768px)を設定するだけのためにこれらのルールを適用することができますデスクトップとタブレットビュー。モバイルブートストラップハンドルnavbarのためには、それほど必要ではありません。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- This sets up bootstrap 3--> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width-device-width, initial-scale-1"> 
 
    <!-- this sets initial zoom when page is loaded --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <!-- links css --> 
 
<style> 
 
@media (min-width: 768px) 
 
    .navbar-nav{ 
 
     text-align:center; 
 
     float:none; 
 
    } 
 
    .navbar-nav li{ 
 
     float:none; 
 
     display:inline-block; 
 
    } 
 
} 
 

 
</style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Lauren Neely</a> 
 
     </div> 
 

 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">Gallery</a> 
 
      </li> 
 
      <li><a href="#">Sketchbook + Misc</a> 
 
      </li> 
 
      <li><a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
    </nav> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-02-14 18:59:42 cesare

ブートストラップでnavbarをセンターしたい

答えて

関連する問題