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宽度，此时媒体查询中的宽度将接管。