Bootstrap 如何决定使用什么“col”类？ [复制]

Question

我正在为一个项目开发一个新框架。通常我只使用我自己的框架，但这需要更多引导样式的布局（但引导不适用），您可以在其中使用“col-lg、col-md、col-xs”类型的大小。

我的问题是如果我有一个 div 是...

 <div class="col-sm-6 col-lg-12">
     <p>Some content</p>
 </div>

浏览器如何知道应该在什么时候实现“col-lg-12”的样式？

我的第一个想法是媒体查询......但在这种情况下，我基本上会说“停止做 col-sm-6 的东西并做 col-lg-12 的东西”这对这个有用实例，但会破坏页面上所有其他可能处于活动状态的应该正常运行的 col-sm-6。

有人对此有任何见解吗？

Answer 1

它总是被实施。当他们的媒体查询开始时，较小的尺寸只是作为覆盖。

  <div class="col-md-12 col-sm-6"></div>

 .col-md-12{
     width:100%;
 }

 @media all and (max-width: 768px){
   .col-sm-6{
     width:50%;
 }
 }

这将应用 100% 的宽度，直到屏幕低于 768 宽度，此时媒体查询中的宽度将接管。