Блог

Я использую сеточную систему Twitter Bootstraps и внутри нее использую их панели. У меня их две cols , и в каждой колонке у меня по одной панели. Но это создает горизонтальную полосу прокрутки на моей странице.

Вероятно, я мог бы отключить горизонтальное переполнение. Но я бы предпочел «исправить» проблему более чистым способом, который вызывает Bootstrap.

Какой был бы хороший способ решить эту проблему?

Пример:http://www.bootply.com/iPdjlxuexk

 <div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Form widgets</div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Selected page widgets</div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
  </div>
</div>
  

Если я оберну <div class="container"></div> вокруг row div, то панели внутри действительно маленькие. На margin-left появляется большое margin-right и container . На самом деле это тоже не то, что мне нужно.

http://www.bootply.com/BWMTAFeO8x

Проблема возникает из-за следующего класса HTML:

 col-md-6
  

В частности, с Bootstrap это означает, что все, что в данный момент находится в этом столбце, будет расширяться до 6 пробелов в ширину столбца. Это нехорошо, если вы хотите иметь только что-то, скажем, шириной в 3 столбца, потому что это фактически растягивает то, что вы пытаетесь сделать.

Как нам это исправить?

Используйте пространство меньшей ширины, а затем используйте способность Bootstraps нажимать / тянуть что-либо. Я продемонстрирую, что я имею в виду, с помощью JsFiddle, который находится здесь.

В принципе, я изменил ваш HTML, чтобы он стал следующим:

     <div class="row">

        <div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
            <div class="panel panel-default">
                <div class="panel-heading">Form widgets</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
            <div class="panel panel-default">
                <div class="panel-heading">Selected page widgets</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>
  

ПРИМЕЧАНИЕ

В моей демонстрации я добавил возможность просмотра панелей как на большом экране, так и на среднем экране, вместо того, чтобы просто использовать ее в настройках medium. Мне также пришлось перемещать столбцы в соответствии с размерами экрана. Вы можете увидеть это в действии с помощью JSFiddle, изменив ширину части экрана вывода в демонстрации. Это полезно, потому что вы можете видеть разницу между экраном большого / среднего размера и экраном маленького / сверхмалого размера.

Дополнительная информация:

Вы можете найти больше информации о системе grid на актуальном веб-сайте. Это покажет вам, как устроена система grid и как вы также можете использовать аспект push / pull.

http://getbootstrap.com/examples/grid/