Question

我有一个疑问，我正在使用bootstrap v4.1，我知道以下代码是正确的：

<div class="container">
      <div class="row">
         <div class="col-sm-6">
                   Dog
             </div>
          <div class="col-sm-6">
                  Cat
          </div>
      </div>
</div>

但是我不知道以下代码是否正确：

<div class="container">
          <div class="col">
             <div class="row-sm-6">
                       Dog
                 </div>
              <div class="row-sm-6">
                      Cat
              </div>
          </div>
    </div>

我了解布局存在差异，但是我没有找到正确的文档。

如果两个代码正确，您会说吗？

此外，当我希望将元素移动到引导单元中时，请使用padding：

<div class="container">
          <div class="row">
                  <div class="col-sm-12" style="padding-top: 10rem; padding-left: 20rem">
                       <span>hello</span>
                    </div>
            </div>
    </div>

您有一些想法或我的解决方案正确吗？我尝试创建空单元格，但它们崩溃了：

<div class="container">
      <div class="row">
         <div class="col-sm-3">
         </div>
         <div class="col-sm-9">
            <span>hello</span>
         </div>
      </div>
    </div>

Answer 1

第一个正确，第二个不正确。

这是由于引导程序的工作原理。

首先创建一行，然后在其中放置列。根据设计，引导程序会将屏幕分为12列，您可以按照自己的方式排列屏幕，就像使用col-md-6一样。这意味着，在平均监视器上，该列将占默认列12的6列。换句话说，宽度的50％（或多或少）。

您发布的第二个示例是错误的，仅仅是因为这些类在引导程序中不存在并且根本不起作用。

看看official bootstrap documentation about the grid system，它是整个引导框架的基础。

关于问题的第二部分，如果col-md-3里面没有任何内容，它会折叠。通常，如果需要一个空列，我只需在其中插入 即可为我解决问题。或者，甚至更好的是，您应该签出column offsets。

头等舱中的行和行以及带有填充的空单元格之间的自举区别

1 个答案: