ブートストラップナビバーの中央に配置されたdivを作成するにはどうすればよいですか？

私は、ロゴ（左）と2つのリンク（右）を含むブートストラップのnavbarを作成しましたが、ロゴやリンクが境界線を越えないようにnavbarを中心としたdivに配置したいジャンボトロン部門助言がありますか？ありがとう。ブートストラップナビバーの中央に配置されたdivを作成するにはどうすればよいですか？

<body> 
    <div class="container-fluid"> 
    <nav class="navbar navbar-fixed-top bg-danger"> 
     <div id="nav-center" class="center"> 
      <a class="navbar-brand" href="index.html"> 
       <img src="Images/logo-white.png" width="200"> 
      </a> 

      <ul class="nav navbar-nav pull-xs-right"> 

       <li class="nav-item"> 
        <a class="nav-link" href="signup.html">Sign Up</a> 
       </li> 

       <li class="nav-item"> 
        <a class="nav-link" href="#contact">Login</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    </div> 
    <div class="container"> 

     <div class=" jumbotron"> 

      <h1>Welcome</h1> 

     </div> 

    </div> 

</body>

出典

2017-02-11 RT5754

これは次の方法で行うことができます。 id="nav-center"にclass="col-lg-6 col-lg-offset-3col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"を追加するだけです。

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      <style type="text/css"> 
 
       
 

 
      </style> 
 
      </head> 
 
      <body> 
 
      <div class="container-fluid"> 
 
    <nav class="navbar navbar-fixed-top bg-danger"> 
 
     <div id="nav-center" class="col-lg-8 col-lg-offset-2col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2"> 
 
      <a class="navbar-brand" href="index.html"> 
 
       <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" width="100"> 
 
      </a> 
 

 
      <ul class="nav navbar-nav pull-right"> 
 

 
       <li class="nav-item"> 
 
        <a class="nav-link" href="signup.html">Sign Up</a> 
 
       </li> 
 

 
       <li class="nav-item"> 
 
        <a class="nav-link" href="#contact">Login</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    <div class="container"> 
 

 
     <div class=" jumbotron"> 
 

 
      <h1>Welcome</h1> 
 

 
     </div> 
 

 
    </div> 
 

 
    </body> 
 
    </html>

注：それは賢明なジャンボトロンの高さと重ならないように

があなたのイメージに応じてCSSを調整します。

希望すると便利です。

出典

2017-02-11 09:54:13 neophyte

ありがとうございました – RT5754

私は助けることができてうれしい！ – neophyte

ブートストラップナビバーの中央に配置されたdivを作成するにはどうすればよいですか？

答えて

関連する問題