Хотите центрировать navbar в bootstrap

Вот мой код, я пробовал много вещей, помоги мне Обиван! Я попытался сделать тег контейнера, ro ответ на css.Хотите центрировать navbar в bootstrap

<!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:

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

с float: none установить центральную Align вашему .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 в bootstrap

ответ

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