引导 col-xs 和 col-sm答案

【问题标题】：Bootstrap col-xs and col-sm引导 col-xs 和 col-sm
【发布时间】：2016-07-22 03:09:17
【问题描述】：

我的引导 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.jpg" class="img-circle" width="66" height="66"></p>
    <p class="name">Johnny Carr</p>
    <p class="big-number">21</p>
</li>

MY DEMO

请检查收件箱摘要框，当尺寸变为 768 像素时，li 将 100% ！

【问题讨论】：

看到这个stackoverflow.com/questions/20242455/…
你期待什么？ 12 是全宽。这是 100%
xs 从 480 像素而不是 768 像素开始工作！！
不正确是什么意思？什么适合你？
所以你需要自定义css。 Take a look at docs, there is no 480px support

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

事实上，你错了。 Bootstrap 3 col-xs 从

.col-xs = (<768px)

.col-sm = (≥768px)

.col-md = (≥992px)

.col-lg = (≥1200px)

但是.. 使用 bootstrap 4，alpha，他们在列表中添加了一个新格式，一个超大的列。 bootstrap 4的网格为：

.col-xs = (<544px)

.col-sm = (≥544px)

.col-md = (≥768px)

.col-lg = (≥992px)

.col-xl = (≥1200px)

希望对你有所帮助

【讨论】：

【解决方案2】：

我认为这可以帮助你。

.col-xs = *超小型设备（即电话）（

.col-sm = 小型设备（即平板电脑）（≥768px）

.col-md = 中型设备（即笔记本电脑或小型台式机）（≥992px）

.col-lg = 大型设备（即台式机）（≥1200px）*

来源链接：What are the difference between col-lg and col-md in bootstrap3

【讨论】：