Question

我是bootstrap的新手，我对这种基本情况非常困惑，我觉得如果不了解网格系统我就无法前进。

问题1：我如何知道某个设备与另一个设备的等效类前缀。例如：col-md-6如果我想将它显示给更小的设备，它的等价物是什么，col-sm- X或col-xs-X？我对格栅系统感到很困惑。

问题2：我遇到了一个bootstrap教程。而且我很困惑为什么他把col-sm-10放在商店里 - 横幅里面只有6个柱子在960格子里，为什么不是col-sm-6呢？请看附图。

在下面的图片中，我指的是按钮区域

<div class="container top-description-app">
        <div class="row">
            <div class="col-sm-6 top-description-text">
                <h1>Hello</h1>
                <h3>We take mobile photography to a brand new level.</h3>
                <p>With our free app you can take amazing photos straigh your phone.</p>
                <div class="col-sm-10 stores-banners">
                    <a href="#" class="btn btn-success">Get the free app</a>
                    </br>
                    <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
                    <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
                </div>
            </div>
            <div class="col-sm-6 top-iphone-wrapper">                   
                <img src="img/iphone-header.png" alt="iPhone app">
            </div>
        </div>
    </div>

希望你能帮助我。提前谢谢。

Answer 1

这取决于您希望网站在不同屏幕尺寸上的外观。

基本上，xs - 移动设备，sm - 平板电脑，md - 桌面设备，lg - 大型桌面设备。

示例：

p {
  height: 200px;
  margin-bottom: 20px;
  background: #ccc;
 }

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-12"><p></p></div>
    <div class="col-sm-6 col-md-12"><p></p></div>
  </div>
</div>

此代码表示您将拥有：移动设备上的1列（xs），桌面上的2列（sm）以及桌面上的1列（md）和大型桌面（lg）。

您提供的此代码并不正确。如果将col-类嵌套在另一个col-类中，则应创建另一行。

的

<div class="container top-description-app">
  <div class="row">
    <div class="col-sm-6 top-description-text">
      <h1>Hello</h1>
      <h3>We take mobile photography to a brand new level.</h3>
      <p>With our free app you can take amazing photos straigh your phone.</p>
      <div class="row">
        <div class="col-sm-10 stores-banners">
          <a href="#" class="btn btn-success">Get the free app</a>
          </br>
          <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
          <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 top-iphone-wrapper">
      <img src="img/iphone-header.png" alt="iPhone app">
    </div>
  </div>
</div>

此代码表示您将在此col-sm-10课程中设置col-sm-6（因此12列中的10列占据此col-sm-6列）。

示例：

p {
  display: block;
  margin-bottom: 20px;
  background: #ccc;
  height: 150px;
}
span {
  background: #333;
  color: #fff;
  display: block;
  height: 100px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Column</p>
      <div class="row">
        <div class="col-sm-6">
          <span>Column in another column</span>
        </div>
        <div class="col-sm-6">
          <span>Column in another column</span>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Column</p>
    </div>
  </div>
</div>

Answer 2

col-md-6它的等价物是什么

没有等价物，我的意思是你不应该这样看，每个引导网格将你的屏幕划分为12个相等的列。我们在引导程序中有4个屏幕大小，名为lg或大，md或中，sm或小xs或超小。您的列定义应基于您希望以该屏幕大小向用户显示的内容。

查看 this example 以更好地理解这个概念。尝试调整屏幕大小以查看正在运行的列。

关于你的第二个问题，让我用一个例子解释一下：

想象一下，你有一个宽度为1200px的屏幕，你想要一个宽度为500px的列，你是如何使用引导网格系统做到的？你需要将你的盒子（屏幕）大小调到1000px并将其分成两部分。你是怎么做到的？

<div class="col-lg-10">
    <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
    </div>
</div>

就这么简单：）

Answer 3

Bootstrap使用12 x 12网格系统，你在网格中有网格。

在上面的示例中，屏幕分为两个col-sm-6，屏幕宽度大于sm断点（默认大约为768px，但可自定义），并在较小的设备上堆叠比sm断点。

您还询问了col-sm-10元素，它是INSIDE the col-sm-6元素，它使容器的宽度为屏幕一半的10/12（或col-sm-6的一半是它的父母。）

我会将col-sm-10包裹在<div class="row">中，并添加一个空的<div class="col-sm-2"></div>来完成该行。也就是说，对于小于sm的屏幕，占据整个空间，屏幕大于sm，占用可用空间的10/12（在这种情况下是屏幕的一半，因为它嵌入了元素）。

如果您想要始终确保这些按钮从不像上面的文字那么宽：如果您希望设置按钮的右边缘，则可以设置col-sm-10和{{1}就像col-sm-2一样，无论屏幕大小如何，都不要堆叠这些div。

Bootstrap Basic

3 个答案: