Question

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

MY DEMO

请检查收件箱摘要框，当尺寸变为768px时，李制作100％!!

Answer 1

事实上，你错了。 Bootstrap 3 col-xs的工作原理是＆lt; 768px。 bootstrap 3的网格是：

.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)

希望这可以解决你的问题

Answer 2

我认为这可以帮到你。

.col-xs = *超小型设备（即电话）（＆lt; 768px）

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

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

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

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

Bootstrap col-xs和col-sm

2 个答案: