Подтвердить что ты не робот

Я не понимаю, что происходит с бутстрапом и строкой

Я был огромным пользователем системной сетки 960, и мне показалось, что я попробую Twitter Bootstrap, но, возможно, это глупый вопрос и вы можете смеяться и опускать меня, но факт в том, что я не понимаю диапазон и ряд.

Итак, моя проблема заключается в том, что когда я создаю контейнер и создаю его внутри, он не подходит друг к другу правильно:

Как в 960gs, если я напишу следующий

<div class="container_12">
  <div class="grid_4"></div>
  <div class="grid_4"></div>
  <div class="grid_4"></div>
</div>

Я получаю идеальный 3 столбца рядом друг с другом.

Но я не могу добиться этого с помощью Twitter Bootstrap, независимо от того, что я делаю, я всегда получаю несоразмерные столбцы, поэтому столбцы не заполняют контейнер, как он должен был, например, с 960gs. Если я помещаю 3 столбца, то поле справа неверно или оно не будет правильно помещаться в контейнере.

Пример Boostrap:

<div class="container">
    <div class="row">
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
    </div>  
</div>

enter image description here

Итак, в приведенном выше примере я заканчиваю непропорциональными столбцами, в первом столбце слева нет поля. Если я делаю это в 960gs с классами сетки, это идеально.

Чем отличается Twitter Bootstrap по сравнению с 960gs, что вызывает мою проблему?

4b9b3361

Ответ 1

Причина:

  • контейнер - 940px
  • строка имеет 960px с маркой -20px.
  • span4 300px с маркой 20px

когда ширина экрана равна <= 940px, -20px от строки и маркер 20px от span4 отменяют друг друга, поэтому первый span4 не имеет левого поля.

Решение "twitter bootstrap":

Добавьте bootstrap-responsive.css и когда экран будет находиться под 980px и выше 768px:

контейнер становится 724px, строка 744px и span4 228px, сохраняя левое поле на первом пролете4.