Question

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

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

例如：

大屏幕：

X X X X X

较小的屏幕：

X X X X

XX 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

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>

Bootstrap中从5 Cols到4 Cols

1 个答案: