Bootstrap 从 5 列到 4 列答案

【问题标题】：From 5 Cols to 4 Cols in BootstrapBootstrap 从 5 列到 4 列
【发布时间】：2019-02-13 01:41:00
【问题描述】：

我正在尝试使用 Bootstrap 创建一个包含 10 个项目的布局。

5 列在宽（大桌面）屏幕中
屏幕变小时 4 列（例如笔记本电脑/平板电脑）

例如：

大屏幕：

X X X X X

小屏幕：

X X X X

X X

当我做这样的事情时：

<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

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

谢谢！！

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案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>

【讨论】：