Отзывчивый загрузчик Twitter: ‹тело› и правое отступы/маржа навигации появляются, когда ширина составляет ‹ 767/768px

Когда я изменяю размер окна ниже ширины 767/768 пикселей, тело и панель навигации получают странное правое поле/отступ (по 20 пикселей каждый, что дает в общей сложности 40 белых пикселей с правой стороны панели навигации). Я не могу понять, является ли это нормальным поведением BS или я сделал что-то не так.

Единственный фрагмент перезаписи размера css/padding/margin bootstrap:

.navbar { margin-bottom: 20px; }

Здесь HTML:

<body>
  <header class='navbar navbar-static-top'>
    <nav class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <div class='icon-bar'></div>
          <div class='icon-bar'></div>
          <div class='icon-bar'></div>
        </a>
        <a href="/" class="brand">Brand Name</a>
        <div class='nav-collapse collapse'>
          <ul class='nav'>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
          </ul>
          <form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get">
            <input class="search-query" id="q" name="q" placeholder="Search" type="text" />
            <input class="hidden" type="submit" value="Find" />
          </form>
        </div>
      </div>
    </nav>
  </header>
  <div class='container'>
    <div class='row'>
      <div class='span12'>
        <!-- ... -->
      </div>
    </div>
  </div>
</body>

Я использую драгоценный камень bootstrap-sass с рельсами. Я не уверен насчет .container роли.


html css responsive-design twitter-bootstrap bootstrap-sass
person Habax    schedule 23.12.2012    source источник
comment
см. также stackoverflow.com/questions/16410659/   -  person Thaddeus Albers    schedule 28.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я ничего не нашел, поэтому написал этот хак:

@media (max-width: 767px) { body { padding-left: 0; padding-right: 0; } } 
.navbar { margin-left: 0; margin-right: 0; }
person Habax    schedule 23.12.2012
comment
Спасибо за решение. Тем не менее, я озадачен. Там должен быть лучший способ. Вытягивание вправо не должно влиять на набивку, не так ли? - person codenoob; 12.10.2014
comment
Хорошо, есть лучшее решение, по крайней мере, для проблемы, которую я пытался исправить, а именно navbar-right. См. этот ответ: stackoverflow.com/questions/15118310/ - person codenoob; 12.10.2014
comment
Я думаю, что ошибся, правая навигация не решает проблему, которая у меня была. - person codenoob; 12.10.2014

arrow_upward
0
arrow_downward

Проверьте отступы на теле для этого медиа-запроса. Также для взлома попробуйте добавить следующий код в медиа-запрос, обрабатывающий этот размер:

 .navbar-inner{
    left: 0x;
 }
person Ryan Rich    schedule 23.12.2012