css - Bootstrap 从 5 列到 4 列

Question

我正在尝试使用 Bootstrap 创建包含 10 个元素的布局。

• 5 列宽屏(大桌面)
• 当屏幕变小时为 4 列(例如笔记本电脑/平板电脑)

例如:

大屏幕:

X X X X X

X X X X X

较小的屏幕:

X X X X

X X X X

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 列，它看起来像这样:

X X X X

X

X X X X

X

如何避免掉线？并且仍然在宽屏幕上实现 5 列布局(而不是 6 列)？

谢谢!!

Answer 1

由于您是按行拆分列，因此您会单独显示第 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>