От 5 Cols до 4 Cols в начальной загрузке - PullRequest
Новая
       9

От 5 Cols до 4 Cols в начальной загрузке

0 голосов
/ 12 февраля 2019

Я пытаюсь создать макет из 10 элементов с помощью Bootstrap.

  • 5 столбцов На широких (больших рабочих столах) экранах
  • 4 столбца, когда экран становится меньше (ноутбук /например, планшет)

Например:

Большой экран:

XXXXX

XXXXX

Меньший экран:

XXXX

XXXX

XX

Когда я делаю что-то вроде этого: 

<div class='row'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
</div>
<div class='row'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
 <div calss='col'>
</div>

На 4 столбцах в строке это выглядит такэто:

XXXX

X

XXXX

X

Как я могу избежать этих пропаданий линии?и все еще достигать 5 колонок (не 6) на широких экранах?

Спасибо !!

1 Ответ

0 голосов
/ 12 февраля 2019

Поскольку вы разделяете столбцы по строкам, именно поэтому вы получаете 5-й столбец, который отображается сам по себе.Единственный способ получить то, что вы хотите, это, вероятно, не использовать столбцы Bootstrap и устанавливать ширину вручную - помните, что Bootstrap не собирается делать все за вас все время.Таким образом, ширина 20% будет равна 5 столбцам, а 25% соответствует 4 столбцам.Например, это быстрый и грязный пример. 

.col {
  float: left;
  width: 20%;
  background-color: red;
}

@media (max-width: 768px) {
  .col {
    width: 25%;
  }

}
<div class='parent'>
 <div class='col'>1</div>
 <div class='col'>2</div>
 <div class='col'>3</div>
 <div class='col'>4</div>
 <div class='col'>5</div>
 <div class='col'>6</div>
 <div class='col'>7</div>
 <div class='col'>8</div>
 <div class='col'>9</div>
 <div class='col'>10</div>
</div>
...