Bootstrap настройка navbar меню

722

05 апреля 2017, 14:59

Добрый вечер. Как в navbar ul - меню разместить по центру страницы. гугле молчит. Есть класс navbar-left, navbar-right, а вот center нет ( динамически через @media вообще не охото делать

Answer 1

Вариант с кастомными стилями:

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

<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.2.0/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
<nav class="navbar navbar-inverse"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>                         
      </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
            <li><a href="#">Page 1-1</a></li> 
            <li><a href="#">Page 1-2</a></li> 
            <li><a href="#">Page 1-3</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>       
    </div> 
  </div> 
</nav>

Один из вариантов с использованием .col-offse-:

<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.2.0/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
   
<nav class="navbar navbar-inverse"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>                         
      </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
      <div class="row"> 
        <div class="col-md-10 col-md-offset-2"> 
          <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li class="dropdown"> 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
            <li><a href="#">Page 1-1</a></li> 
            <li><a href="#">Page 1-2</a></li> 
            <li><a href="#">Page 1-3</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul> 
        </div> 
      </div> 
       
    </div> 
  </div> 
</nav>