本文介绍了Bootstrap col-xs和col-sm的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的bootstrap col-xs从768px开始工作是正常的，我知道xs正在从480px开始工作？
< li class =col-xs-12 col-sm-6 col-md-4 col-lg-3>
< p>< img src =img / wdigets / 1.jpgclass =img-circlewidth =66height =66>< / p>
< p class =name> Johnny Carr< / p>
< p class =big-number> 21< / p>
< / li>
请检查Inbox Summery框里的尺寸变成768px时的100％！
解决方案
事实上，你错了。 Bootstrap 3 col-xs正在从< 768px开始工作。引导程序3的网格是：
.col-xs =（
。 col-sm =（≥768px）
.col-md =（≥992px）
.col-lg =（≥1200px）
但是..通过bootstrap 4，alpha，他们在列表中添加了一种新格式，这是一个超大的列。引导程序4的网格是：
.col-xs =（
。 col-sm =（≥544px）
.col-md =（≥768px）
.col-lg =（≥992px）
.col-xl =（≥1200px）
b
my bootstrap col-xs working from 768px is that normal , i know the xs is working fro 480px ?
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p><img src="img/wdigets/1.jpg" class="img-circle" width="66" height="66"></p>
<p class="name">Johnny Carr</p>
<p class="big-number">21</p>
</li>
please check the Inbox Summery box the li make 100% when the size become 768px !!
解决方案
In fact, you're wrong. Bootstrap 3 col-xs is working from <768px. The grid of bootstrap 3 is:
.col-xs = (<768px)
.col-sm = (≥768px)
.col-md = (≥992px)
.col-lg = (≥1200px)
But.. With bootstrap 4, alpha, they have added a new format to the list, a extra large column. The grid of bootstrap 4 is:
.col-xs = (<544px)
.col-sm = (≥544px)
.col-md = (≥768px)
.col-lg = (≥992px)
.col-xl = (≥1200px)
Hope this hepls you out
这篇关于Bootstrap col-xs和col-sm的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！