ブートストラップのナビゲーションバーにテキストを配置する

ブートストラップを使用してナビゲーションバーを作成していますが、テキストは左側に配置されています。テキストをナビゲーションバーの中央に表示し、さまざまなデバイスでサイトのサイズを変更したり表示したりするときにテキストを保持する方法を考え出すことはできません。私はフロートをバイパスしようとしました：左;以下のコードでは、私はまだそれを把握することはできません。ブートストラップのナビゲーションバーにテキストを配置する

body { 
 
    font-family: century gothic; 
 
} 
 

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

 
.li { 
 
    text-align: center; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>My Website</title> 
 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid-nav"> 
 
     <div> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">CSGO</a> 
 
       </li> 
 
       <li><a href="#">ARMA III</a> 
 
       </li> 
 
       <li><a href="#">PUBG</a> 
 
       </li> 
 
       <li><a href="#">Other</a> 
 
       </li> 
 
       <li><a href="#">About</a> 
 
       </li> 
 
       <li><a href="#">External Links</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="footer navbar-fixed-bottom"> 
 
     <p class="footer-text">Copyright 2017 ©</p> 
 
     </div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <script src="js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

それはまじめな顔で私を見つめていた場合にとても残念このようなものにかなり新しいです。

ありがとうございました。

出典

2017-08-15 H Smith

はあなたを助ける必要があります <div class="container-fluid-nav text-center">

出典

2017-08-15 10:45:30 Sangsom

本当にありがとうございました！しかしもう1つのことですが、コンテンツをnavbarの全幅に渡ることは可能ですか？ –

これにtext-centerクラスを追加します。私の考えでは、あなたはBootstrap Navbarを間違って使っています。主なクラスと階層がありません。ブートストラップのnavbarドキュメントをご覧ください。 https://getbootstrap.com/docs/3.3/components/#navbar

これをあなたのCSSに追加すると、必要に応じて動作するはずです。

出典

2017-08-15 10:45:47 Aslam

あなたはタグ<nav>を閉じておらず、あなたが持っていない.liをターゲットにしているので、それが中央にない理由です。

あなたは次のように行うことができます：メニューのため、ページの中央にフレキシボックスを使用して

body { 
 
    font-family: century gothic; 
 
} 
 

 
ul li { 
 
    text-align: center; 
 
    list-style: none; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<body> 
 
     <nav class="navbar navbar-default"> 
 
     <div class="container-fluid-nav text-center"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">CSGO</a> 
 
       </li> 
 
       <li><a href="#">ARMA III</a> 
 
       </li> 
 
       <li><a href="#">PUBG</a> 
 
       </li> 
 
       <li><a href="#">Other</a> 
 
       </li> 
 
       <li><a href="#">About</a> 
 
       </li> 
 
       <li><a href="#">External Links</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
     <div class="footer navbar-fixed-bottom"> 
 
     <p class="footer-text">Copyright 2017 ©</p> 
 
     </div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <script src="js/bootstrap.min.js"></script> 
 
    </body>

出典

2017-08-15 10:49:55 RasmusGlenvig

。リスト要素の余裕を少し追加する。

body { 
 
    font-family: century gothic; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    justify-content: center; 
 
list-style: none; 
 
} 
 

 
li { 
 
    text-align: center; 
 
} 
 

 
li:not(:last-child) { 
 
margin-right: 1em; 
 
} 
 

 
.footer { 
 
    background-color: #263238; 
 
    height: 5%; 
 
} 
 

 
.footer-text { 
 
    color: white; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 12px; 
 
}

<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> 
 
<script src="js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid-nav"> 
 
    <div> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">CSGO</a> 
 
     </li> 
 
     <li><a href="#">ARMA III</a> 
 
     </li> 
 
     <li><a href="#">PUBG</a> 
 
     </li> 
 
     <li><a href="#">Other</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">External Links</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="footer navbar-fixed-bottom"> 
 
    <p class="footer-text">Copyright 2017 ©</p> 
 
    </div> 
 
</nav>

出典

2017-08-15 10:53:03 Gerard

ブートストラップのナビゲーションバーにテキストを配置する

答えて

関連する問題