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，{{1 }和col-md-8。基本上转换网格。

Answer 1

xs /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */

sm /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

md /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

lg /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

事实上，Bootstrap首先是移动的例如，您在大屏幕上有两个内容块：

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

在小屏幕设备上，它看起来很奇怪！在这种情况下xs - 课程帮助你！

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

这意味着，在屏幕宽度为1200px之前，每个块占据屏幕的整个宽度。当屏幕宽度为1200px以上时，每个块占全屏宽度的一半

<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或更多时，每个块占用整个屏幕宽度的一半

Answer 2

Bootstrap网格系统 Bootstrap的网格系统允许在整个页面中最多12 columns。

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

网格类 Bootstrap网格系统有四个类：

xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

可以组合上面的类来创建更加动态和灵活的布局。

Bootstrap网格的基本结构

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

Learn more about it

Answer 3

请参阅this链接，了解引导网格系统及其使用方法。

引导列网格转换

3 个答案: