Bootstrap列布局疑问：992-1200px下col-lg为何未生效？

嘿，我一眼就瞅到问题所在啦！你的代码里藏了个超容易忽略的拼写错误——在.news的class里，你写的是сol-lg-8（注意第一个字母是西里尔字母с，不是英文的c），Bootstrap根本识别不了这个错误的类名，所以当屏幕宽度在992-1200px这个lg断点区间时，col-lg-8和col-lg-4完全没起作用，自然就沿用了col-md-12的布局，两个区块都占满12列啦。

先给你明确下Bootstrap 4的断点规则，避免混淆：

• col-md-*：生效于屏幕宽度≥768px
• col-lg-*：生效于屏幕宽度≥992px
• col-xl-*：生效于屏幕宽度≥1200px

当屏幕尺寸同时满足多个断点（比如992-1200px同时符合md和lg的要求），优先级更高的lg类会覆盖md类的设置，但前提是类名必须书写正确才行。

修正后的代码 #

CSS部分无需修改，只需要修正HTML里的拼写错误：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="news col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">fdsf </div>
    <div class="posts col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">adadad </div>
  </div>
</div>

把.news里的сol-lg-8改成col-lg-8（英文小写c），这样在992px以上的屏幕，两个区块就会分别显示8列和4列啦。

内容的提问来源于stack exchange，提问作者Randall