Bootstrap: изменение макета

#javascript #html #css #twitter-bootstrap

#javascript #HTML #css — код #twitter-bootstrap

Вопрос:

У меня есть сайт, который реагирует на прокрутку аналогично этому.

Боковые панели находятся под содержимым основного раздела, поэтому, чтобы увидеть содержимое левой / правой панели, вам нужно прокрутить вверх до самого низа.

Но на этом сайте при изменении размера страницы боковые панели остаются на своих местах, поэтому вы можете прокручивать влево / вправо, чтобы увидеть их содержимое.

Есть ли способ заставить сайт вести себя вторым образом, когда он находится на рабочих столах?

  <div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-md-4" style="background-color:lavender;">.col-md-4</div>
    <div class="col-md-4" style="background-color:lavenderblush;">.col-md-4</div>
    <div class="col-md-4" style="background-color:lavender;">.col-md-4</div>
  </div>
</div>

скрипка

Ответ №1:

Попробуйте добавить col-xs-4 в классы div

 <div class="col-xs-4 col-md-4" style="background-color:lavender;">.col-sm-4</div>

1. @xort, но разве размер шрифта не единственное, что меняется? Я имею в виду, когда я запускаю вашу скрипку, я всегда вижу все 3 столбца, в то время как на втором сайте при увеличении страницы боковые панели выходят за пределы области просмотра (слева и справа).

2. @parsecer Я не думаю, что другой веб-сайт использует Bootstrap, и я не думаю, что он отзывчивый. Что это делает, так это гарантирует, что столбцы занимают по 4 единицы каждый, но в вашем исходном коде вы использовали col-md-4 значение, означающее, что этот класс будет применяться к устройствам среднего размера (992px и выше). таким образом, столбец возвращается к своему поведению по умолчанию, когда размер меньше 992px. col-xs Классы вступают в силу, когда размер экрана меньше 768 пикселей getbootstrap.com/css/#grid