Самозагрузочный мобильный первый сетка полноэкранный

Question

Я пытаюсь создать мобильную первую веб-страницу, и поэтому я тестирую систему сетки Bootstrap, поскольку это казалось простым способом продвижения вперед, но у меня проблемы с получением полной длины сетки на мобильном iphone 6s (то же самое со всемиразмеры экрана в этом диапазоне). У меня есть тестовый скрипт с 6 столбцами, которые будут отображаться на экране по всей линии.

Если я использую следующие столбцы, сетка выстраивается в линию, но справа остается большое количество пустого пространства. Код и снимок экрана показаны ниже.

 <div class="container">
  <div class="row">
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
  </div>
</div>

Если я изменю код на col-sm, я получу сетку, как показано на экране нижеshot

Как лучше всего расположить эти боксы бок о бок по всему экрану. Должен ли я использовать отступы или ширину% CSS на каждом блоке или есть лучший подход к этому, чем Bootstrap

Answer 1

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

просто взгляните на https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

, вот пример. каждый столбец автоматически становится 33,33% всей ширины экрана

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Обновление

Если вы используете загрузчик V3, использование может сделать что-то вроде этого:

.row-eq-height {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container ">
  <div class="row row-eq-height">
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
  </div>
</div>