Question

我正在尝试有12列，在大屏幕上每个占1列，在小屏幕上每个占4列。但是，当我尝试将其最小化时，什么也没发生，它们只是被推到另一个之下。我希望在小屏幕上连续显示三列，但这并没有发生，我想知道我在这里做错了什么。您能在不增加负面声誉的情况下帮助我吗？谢谢！

代码如下：

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
  </div>
</div>

Answer 1

col-xs在引导程序4中不可用。

对于“ xs”，您仅需使用“ col”。像：col-4;

要了解更多信息，请查看引导程序documentation。

Answer 2

据我所知，引导程序4中没有“ col-xs-”。因此在小屏幕上使用“ col-”

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)

引导程序列无法按预期运行

2 个答案: