Как создать div, сосредоточенный в бутстрап-навигаторе?

Я создал загрузочную навигационную панель, содержащую логотип (слева) и две ссылки (справа), но я бы хотел поместить их в div, который центрирован на панели навигации, чтобы логотип или ссылки не распространялись за края jumbotron 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

Вы можете сделать это следующим образом. Просто добавьте 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" в id="nav-center".

<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 в соответствии с вашим изображением так, чтобы она не пересекалась с высоты JumboTron мудрым.

Надеюсь, это поможет!

источник

2017-02-11 09:54:13 neophyte

Спасибо, это помогло – RT5754

Рад, что я мог бы помочь! – neophyte

Как создать div, сосредоточенный в бутстрап-навигаторе?

ответ

Смежные вопросы