css - Bootstrap 12 列尺寸 1 在超小屏幕上不适合

Question

您好，我正在尝试按照标题所说的进行操作，但是在小屏幕(例如我的手机)中，12 列不适合该行。我也在 Foundation 上尝试过，但结果是一样的。

例子:

<div class="container">
<div class="row">
  <div class="col-xs-1">1</div>
  <div class="col-xs-1">2</div>
  <div class="col-xs-1">3</div>
  <div class="col-xs-1">4</div>
  <div class="col-xs-1">5</div>
  <div class="col-xs-1">6</div>
  <div class="col-xs-1">7</div>
  <div class="col-xs-1">8</div>
  <div class="col-xs-1">9</div>
  <div class="col-xs-1">10</div>
  <div class="col-xs-1">11</div>
  <div class="col-xs-1">12</div>
</div>
</div>

或者在我正在处理的文件上:编辑:自从我修复后就没有 loger true。

这是预期的行为吗？这可以修复吗？如果可以，最好的方法是什么？

Answer 1

那是因为div之间的空间。将此 CSS 添加到您的“行”div:

.no-gutter > [class*='col-xs-']{padding-right: 0; padding-left: 0}

在 html 中:

<div class="row no-gutter">
...