Question

您好我正在尝试做标题所说的内容，但在一个小屏幕（如我的手机）中，12列不适合该行。我也在基金会尝试了这个，但结果是一样的。

示例：

<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>

或者我正在处理的文件：编辑：因为我修好了所以没有真正的。

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

Answer 1

那是因为div之间的空间。将此CSS添加到您的＆＃34;行＆＃34; DIV：

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

在html中：

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

超小屏幕上的Bootstrap 12列大小为1不适合

1 个答案: