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

问题描述

我有以下引导程序代码:

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

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

现在

12

必填

1 2

解决方案

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

你必须为小于中等的@media 声明你的 col 的大小

超小型设备电话 (<768px) - col-xs-*
小型设备平板电脑 (≥768px) - col-sm-*
中型设备桌面 (≥992px) - col-md-*
大型设备桌面 (≥1200px) - col-lg-*

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.

Now

1
2

Required

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>

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

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屋！