css - Bootstrap 列网格转换

Question

<div class="col-sm-6 col-sx-12">
    <div class="top-share pull-right">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-pinterest"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
   </div>
</div>

我正在使用 Bootstrap 框架。如何使用 Bootstrap 列或网格系统？

我正在使用 col-md-3、col-md-4、col-md-6、col -md-8, col-md-9 等各种情况。我想知道当我将 col-sm 和 col-xs 分别用于 col-md-3 时会有什么列， col-md-4、col-md-6、col-md-8 和 col-md-9。基本上是网格的转换。

Answer 1

xs /* 超小型设备(手机，小于 768px)*/
/* 没有媒体查询，因为这是 Bootstrap 中的默认设置 */

sm /* 小型设备(平板电脑，768px 及以上)*/
@media(最小宽度:@screen-sm-min){ ... }

md /* 中型设备(桌面，992px 及以上)*/
@media (min-width: @screen-md-min) { ... }

lg /* 大型设备(大型桌面，1200px 及以上)*/
@media(最小宽度:@screen-lg-min){ ... }

其实Bootstrap是移动优先的。
例如，您在大屏幕上有两个内容 block :

<div class="col-lg-6">
  // your code here...
</div>
<div class="col-lg-6">
  // your code here...
</div>

在小屏幕设备上看起来很奇怪!在这种情况下，xs-class 可以帮助您!

<div class="col-xs-12 col-lg-6">
  // your code here...
</div>
<div class="col-xs-12 col-lg-6">
  // your code here...
</div>

意思是，在screen-width为1200px之前，每个 block 占满屏幕宽度。当屏幕宽度为 1200px 及以上时，每个 block 占据全屏幕宽度的一半

<div class="col-xs-12 col-md-6">
  // your code here...
</div>
<div class="col-xs-12 col-md-6">
  // your code here...
</div>

在这种情况下，当屏幕宽度为 992px 或更多时，每个 block 占据全屏幕宽度的一半