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

【问题标题】：Bootstrap - What is wrong with this code?Bootstrap - 这段代码有什么问题？
【发布时间】：2019-04-15 02:14:24
【问题描述】：

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

}

结果如下所示：

我的代码有什么问题？

【问题讨论】：

标签： twitter-bootstrap sass

【解决方案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>

【讨论】：