Bootstrap-此代码有什么问题？

Question

使用引导程序类，我希望每个元素的桌面和平板电脑视图宽度均为100％，而移动设备视图宽度为50％。 但是我不明白为什么它不能正常工作。

HTML

<div class="row">
  <div class="col-xs-12">

    <div class="panel">
    <div class="row">
        <div class="col-xs-12">
         some text
        </div>
        <div class="col-xs-12">
          <span class="text">Accordion with image and text</span>
        </div>
      </div>
    </div>

  </div>
</div>

SCSS

.panel {
  display: flex;
  padding: 20px 10px;
  border: 1px solid #000;
  align-items: center;

  div {
    outline: 1px solid red;
  }

}

结果如下：

我的代码有什么问题？

Answer 1

首先，从 Bootstrap 4 中删除了 -xs-缀，因此这些类只是 col-1，col-2，col- 3，col-12 。

如前所述，您希望每个元素的宽度在桌面视图和平板电脑视图中为100％，在移动视图中为50％。

您应使用以下代码。

<div class="row">
  <div class="col-sm-12 col-6">
       some text
  </div>
 <div class="col-sm-12 col-6">
       Accordion with image and text
  </div>
</div>