Bootstrap -这段代码有什么问题？
Bootstrap -这段代码有什么问题？
提问于 2019-04-14 22:07:47
使用bootstrap类，我希望每个元素在Desktop和tablet视图中的宽度为100%，但在Mobile视图中为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;
}
}结果如下所示：
我的代码出了什么问题？
回答 1
Stack Overflow用户
发布于 2019-04-15 02:14:25
首先，从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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55676177
复制相关文章
相似问题
腾讯云开发者
