Блог

Главная - Вопросы по программированию - Клиент boostrap — раздел «превышает» свой предел

Клиент boostrap — раздел «превышает» свой предел

#css #wordpress #twitter-bootstrap #responsive-design #row

#css #wordpress #twitter-bootstrap #адаптивный дизайн #строка

Вопрос:

Люди,

У меня возникли проблемы на моем веб-сайте: http://clubedebeneficiosunilife.com.br /

Существует раздел «Destaques» с 16 изображениями и кнопкой «Saiba mais» для каждого из 16.

Когда я открываю сайт на мониторе 15, 17, 19 дюймов, все нормально. ХОРОШО!

Когда я открываю на мобильном телефоне, это тоже хорошо. Начальная загрузка работает нормально, и 16 больших пальцев, которые раньше были 4×4 … переходят на 2×8, чтобы соответствовать меньшему экрану ячейки:

Нравится эта ссылка: http://mobiletest.me/iphone_5_emulator/?u=http://clubedebeneficiosunilife.com.br

Это так идеально.

Моя проблема в том, когда я открываю планшет: http://mobiletest.me/ipad_mini_emulator/?u=http://clubedebeneficiosunilife.com.br

Раздел «Destaques» отображает большие пальцы в 2×8 (правильно), но обратите внимание, что это экстраполирует контейнер с белым фоном, в котором он должен оставаться.

Как я могу исправить CSS, чтобы при разрешении планшета не возникало этой проблемы?

У меня не так много опыта, и я сталкиваюсь с большими трудностями в решении этой проблемы.

Заранее спасибо.

Ответ №1:

Вы должны действительно использовать container-fluid class вместо container , так как последний имеет фиксированную ширину, и когда вы размещаете контейнер фиксированной ширины в контейнере фиксированной ширины, он переполнится из-за всех отступов, где для as container-fluid установлено значение 100% 

 <div class="container-fluid">
    <h2 class="left">Destaques</h2>
    ...
</div>

Демонстрация проблемы:

 .container, .container-fluid {
  border: 1px solid red;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>.container</h1>
  <div class="container">
    <h2>.container</h2>
    <div class="container">
      <h3>.container</h3>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h1>.container</h1>
  <div class="container-fluid">
    <h2>.container-fluid</h2>
    <div class="container-fluid">
      <h3>.container-fluid</h3>
    </div>
  </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/8tkLtjya /