时间戳

首页 > 解决方案 > Bootstrap 4：第二行没有全宽

css - Bootstrap 4：第二行没有全宽

问题描述

身体的结构是这样的

<main role="main" class="container">
        <div class="starter-template">
          <div class="row text-center">
            <div class="col-md-4">
              <div class="align-middle">
                <h1 class="display-5">Headline 1</h1>
                <p>Lorem Ipsum. </p>
              </div>
            </div>
            <div class="col-md-5 my-2"><span>Some text in the other column</span></div>
          </div>
          <div class="row text-center">
            <div class="row">
              <h2>Headline 2</h2>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 1</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 2</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
              <div class="col-md-4">
                <div class="row">
                  <h4 class="text-center">Box 3</h4>
                </div>
                <div class="row"><span>abc</span><span>def</span></div>
              </div>
            </div>
          </div>
        </div>
      </main>

第一行包含两列，这很好用。第二行里面有两行。其中一个包含标题 2，应该在中心，另一个包含三列。我注意到的是第二行没有像第一行那样的全宽。

这就是输出的样子 在此处输入图像描述

我需要包含标题 2 的第二行具有像第 1 行一样的全宽。我尝试放置 width:100% 但它不起作用。

标签： csstwitter-bootstrapbootstrap-4

解决方案

在嵌套行内部，您有一个row内部row标题 2。下面的示例使用全宽 col 而不是嵌套行col-md-12

<main role="main" class="container">
  <div class="starter-template">
    <div class="row text-center">
      <div class="col-md-4">
        <div class="align-middle">
          <h1 class="display-5">Headline 1</h1>
          <p>Lorem Ipsum. </p>
        </div>
      </div>
      <div class="col-md-5 my-2"><span>Some text in the other column</span></div>
    </div>
    <div class="row text-center">
      <div class="col-md-12">
        <h2>Headline 2</h2>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 1</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 2</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4 class="text-center">Box 3</h4>
        </div>
        <div class="row"><span>abc</span><span>def</span></div>
      </div>
    </div>
  </div>
</main>

推荐阅读