Css 自举柱网转换

我正在使用引导框架。如何使用引导柱或网格系统

---

我在各种情况下使用

col-md-3

，

col-md-4

，

col-md-6

，

col-md-8

，

col-md-9

，等等。我想知道当我分别为

col-md-3

、

col-md-4

、

col-md-6

、

col-md-8

和

col-md-9

使用

col-sm

和

col-md-9

时，会有哪些列。基本上是网格的转换

引导网格系统 Bootstrap的网格系统在页面上最多允许

12列

如果不想单独使用所有12列，可以将这些列组合在一起以创建更宽的列：

网格类 引导网格系统有四个类：

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

可以将上面的类组合起来，以创建更具动态性和灵活性的布局

引导网格的基本结构

xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

...

---

xs

/*超小型设备（电话，小于768px）*/
/*没有媒体查询，因为这是引导中的默认设置*/

sm

/*小型设备（平板电脑、768px及以上）*/
@媒体（最小宽度：@screen sm min）{…}

md

/*中型设备（台式机、992px及以上）*/
@媒体（最小宽度：@screen md min）{…}

lg

/*大型设备（大型台式机，1200像素及以上）*/
@媒体（最小宽度：@screen lg min）{…}

事实上，引导首先是移动的。
例如，在大屏幕上有两块内容：

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

这意味着，在屏幕宽度为

1200px

之前，每个块占据整个屏幕宽度。当屏幕宽度

1200px

或更大时，每个块占全屏宽度的一半

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

//你的代码在这里。。。
//你的代码在这里。。。

---

在这种情况下，当屏幕宽度为

992px

或更大时，每个块占全屏宽度的一半请参考链接，了解引导网格系统及其使用方法。

在引导中，有5种网格选项，根据我们的需要使用特定设备col xs-（超小型设备）col sm-（小型设备）col md-（中型设备）col lg-（大型设备）检查此链接可能你会有想法：好的，我明白。但是如果我使用col-md-3，它对col-sm、col-xs或col-lg的作用是什么？tnkx通过在你的列中添加

col-xs-.col-md-

来使用额外的中小型设备网格类。@Hasan你一直在问什么？非常感谢@Lgor Lvancha

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

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