Bootstrap - 这段代码有什么问题？

Question

使用bootstrap类，我希望桌面和平板电脑视图的每个元素的宽度为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

首先，-xs-中缀从Bootstrap 4中删除，因此类只是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>