Как разбить строку начальной загрузки на 5 равных частей?

Ответ 1

Отличный способ разрешить это здесь!

По умолчанию Bootstrap не предоставляет сетку, которая позволяет нам создавать макет пяти столбцов, но, как вы можете видеть, это довольно просто. Сначала вам нужно создать определение столбца по умолчанию так, как это делает Bootstrap. Я назвал свои классы col -..- 15.

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

Далее вам нужно определить ширину новых классов в случае различных запросов к мультимедиа.

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Теперь вы готовы объединить свои классы с оригинальными классами Bootstrap. Например, если вы хотите создать элемент div, который ведет себя как макет пяти столбцов на средних экранах и, как четыре столбца на более мелких, вам просто нужно использовать что-то вроде этого:

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Ответ 2

Версия старого бутстрапа

Используйте пять div с классом span2 и дайте первому классу offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Пять одинаково разнесенных и центрированных столбцов.

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

<ч/" > CUSTOM STYLE

Пользовательские стили

.container {width:100%; float:left;}
.col1{ width:20%; float:left}

Последний стиль таблицы

.container {width:100%;display:table;}
.col1{ width:20%; display:table-cell;}

Ответ 3

Вы можете использовать что-то вроде

<div class="container">
  <div class="col-sm-2 col-sm-offset-1"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
  <div class="col-sm-2"></div>
</div>

первый контейнер будет иметь смещение, так что вы будете иметь одинаковый запас (col-sm-1) с левой и правой стороны с 5 равными контейнерами внутри.

Ответ 4

 <div class="row">
         <div class="col-md-7">
             <div class="row">
                 <div class="col-md-4 bg-danger">1</div>
                 <div class="col-md-4 bg-success">2</div>
                 <div class="col-md-4 bg-danger">3</div>
             </div>
         </div>
         <div class="col-md-5">
                <div class="row">
                        <div class="col-md-6 bg-success">4</div>
                        <div class="col-md-6 bg-danger">5</div>
                    </div>
         </div>
     </div>

Ответ 5

это довольно просто, если вы используете bootstrap 4, не уверен, что он также работает в bootstrap 3

<div class="container-fluid">
<h2>Bootstrap 4 Five Columns</h2>
<h5>Full-width (within .container-fluid)</h5>
<div class="row">
    <div class="col">
        <img src="//placehold.it/640x480" class="img-fluid">
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>

</div>

Ответ 6

Вы можете использовать span2 для использования максимального объема пространства. Код:

<div class="row-fluid">
    <div class="span2">1</div>
    <div class="span2">2</div>
    <div class="span2">3</div>
    <div class="span2">4</div>
    <div class="span2">5</div>
</div>

Ответ 7

Используйте это свойство css в файле custromScript.css для использования на больших устройствах

    .col-lg-2-0 {
      position: relative;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }

и используйте класс col-lg-2-0 вместо col-lg-2 который разделит четыре столбца