Question

我正在尝试进行attached picture上的布局，因此左侧的列跨多行。目前，我的代码如下：

<div class="row my-row">
    <div class="col-6 my-col">1</div>
    <div class="col-6 my-col">
        <div class="row my-row">
            <div class="col-lg-12 my-col">2</div>
            <div class="col-lg-12 my-col">3</div>
        </div>
    </div>
</div>

还有其他/更好的方法吗？同样，我不太了解这段代码是如何完成的，所以如果有人可以解释会很好吗？谢谢。

Answer 1

在大多数情况下，您都在正确地进行操作。 Bootstrap根据组件的类名称将CSS样式应用于页面上的组件。为了使项目在整个页面上水平对齐，引导程序使用“行”类创建垂直行。在“行”元素内，引导程序将根据跟随在＃之后的col的权重来对标记有“ col-＃”的元素进行大小调整。 col-12是容器的最大宽度，因此您最多可以创建12列（12个col-1）。在您的示例中，col-6是一列占据页面一半的列。为了进一步拆分该列的右半部分，应用了附加的row，并创建了另外两列。为了使每一列准确占据该行的一半，这两列应该为col-6。

在这些组件之后，您只需要再添加一个row，并且要获得一行的1/3，您将需要三个col-4元素来创建最后一行。（4 + 4 + 4 = col-12 =全行）

此外，Bootstrap无法自动检测列的大小（如果您希望它们都相等）。要利用此优势，您无需在col之后放置任何数字，只需在col内提供一个类为row的元素，引导程序会自动将它们调整为等距的列。

Bootstrap提供了extensive documentation以获得更多帮助！

Answer 2

id使用类似这样的内容

<div class="row">
    <div class="col-4">
        1
    </div>
    <div class="col-8">
        <div class="row">
            <div class="col-6">
                2
            </div>
            <div class="col-6">
                3   
            </div>
            <div class="col-6">
                4
            </div>
            <div class="col-6">
                5
            </div>

        </div>
    </div>
    <div class="col-4">
        6
    </div>
    <div class="col-4">
        7
    </div>
    <div class="col-4">
        8
    </div>
</div>

技巧是将行与已经存在的另一列一起使用。这样一来，您可以在2-> 5（看起来像是1中的一列）内。

6-> 8只能在一行/同一行中是3 col-4。

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-md-4 col-lg-4 col-12 col-sm-6 d-flex align-items-center">
              1
            </div>
            <div class="col-md-8 col-lg-8 col-12 col-sm-6">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  2
                </div>
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  3
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  4
                </div>
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  5
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          6
        </div>
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          7
        </div> 
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          8
        </div> 
      </div>
    </div>
  </section>
</body>
</html>

试试看！它也会使您的内容在图像上垂直对齐。作为参考，请通过 https://getbootstrap.com/docs/4.0/utilities/flex/ 此链接。另外，如果您希望它水平居中，请使用.justify-content-center

Bootstrap 4布局，网格

3 个答案: