1

В мобильной версии иконка меню находится справа, а в десктопной - вот так, слева:

десктоп версия

Подскажите, пожалуйста, как это исправить?

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Food, LLC</a>
      <ul class="nav navbar-nav navbar-right pull-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Chicken</a></li>
            <li><a href="#">Beef</a></li>
            <li><a href="#">Sushi</a></li> 
          </ul>
        </li>
      </ul>
    </div>    
  </div>
</nav>

1
  • Судя по всему на маленьких разрешениях у вас убирается класс .pull-right отмените это действие и список будет находиться всегда справа
    – Alex
    29 ноя 2016 в 16:55

1 ответ 1

3

Вы поставили пункты меню внутрь блока .navbar-header. Этот блок на мобильных устройствах растягивается на всю ширину экрана, а на десктопе сжимается влево.

Перекройте ему свойство float:

@media (min-width: 768px) {
  .navbar-header {
    float: none;
  }
}

А на мобильном экране этому блоку не нужен margin-right. Это свойство бутстрап определяет через .container-fluid > .navbar-header, поэтому и перебивать нужно через него же:

@media (max-width: 767px) {
  .container-fluid > .navbar-header {
    margin-right: 0;
  }
}

Для других размеров экрана такие же свойства прописывает сам бутстрап. А если бы не прописывал — мы бы заставили. Поэтому упростим:

.container-fluid > .navbar-header {
  float: none;
  margin-right: 0;
}

И не забудьте подключить джиквери и скрипты бутстрапа, что меню разворачивалось пр нажатии на кнопку.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.container-fluid > .navbar-header {
  float: none;
  margin-right: 0;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Food, LLC</a>
      <ul class="nav navbar-nav navbar-right pull-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Chicken</a></li>
            <li><a href="#">Beef</a></li>
            <li><a href="#">Sushi</a></li> 
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.