如何为小尺寸显示器设置bootstrap col? [英] How to set bootstrap col for small display sizes?

问题描述

我有以下Bootstrap代码:

I have the following Bootstrap code:

<div>
<div class="col-md-5"></div>
<div class="col-md-7"></div>
</div>

如何在小显示器中以全宽显示这两个块? 现在它显示在彼此下方.

How to display these two blocks in full width in small displays? Now it displayed under each other.

现在

1
2

必需

1 2

1 2

推荐答案

<div>
    <div class="col-md-5 col-sm-5 col-xs-5"></div>
    <div class="col-md-7 col-sm-7 col-xs-7"></div>
</div>

您必须声明@media小于medium的col大小

You have to declare the size of your col for the @media less than medium

其他小型设备电话(< 768px)-col-xs- *
小型设备平板电脑(≥768像素)-col-sm- *
中型设备台式机(≥992px)-col-md- *
大型设备台式机(≥1200像素)-col-lg- *

Extra small devices Phones (<768px) - col-xs-*
Small devices Tablets (≥768px) - col-sm-*
Medium devices Desktops (≥992px) - col-md-*
Large devices Desktops (≥1200px) - col-lg-*

这篇关于如何为小尺寸显示器设置bootstrap col?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！