在Bootstrap 4中使3列的宽度和中心对齐75％

Question

我有以下bootply片段： https ://www.bootply.com/FHwoiollCJ

如您所见，我有一个元素是宽度的75％。

我想居中对齐此框下方的3个项目，以使第1个和第3个框不会悬空。 我该怎么做呢？

<header class="masthead text-white">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-9 mx-auto" style="background:rgba(0,0,0,0.3);">
        <h1 class="mb-5">H1</h1>
        <p>We pride ourselves...</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3 mx-auto">
          <div class="" style="background:red">
            <h3>TEST</h3>
            <p>test</p>
        </div>
      </div>
      <div class="col-lg-3 mx-auto">
        <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3" style="background:red">
          <h3>TEST</h3>
          <p>test</p>
        </div>
      </div>
      <div class="col-lg-3 mx-auto">
        <div class="features-icons-item mx-auto mb-0 mb-lg-3" style="background:red">
            <h3>TEST</h3>
            <p>test</p>
          </div>
        </div>
      </div>
      </div>
    </header>

Answer 1

您可以使用嵌套的网格解决方案： https : //getbootstrap.com/docs/4.0/layout/grid/#nesting

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <header class="masthead text-white"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="col-lg-9 mx-auto" > <div class="p-3" style="background:rgba(0,0,0,0.3);"> <h1 class="mb-5">H1</h1> <p>We pride ourselves...</p> </div> </div> </div> <div class="row"> <div class="col-lg-9 mx-auto"> <div class="row"> <div class="col-lg-4"> <div class="" style="background:red"> <h3>TEST</h3> <p>test</p> </div> </div> <div class="col-lg-4"> <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3" style="background:red"> <h3>TEST</h3> <p>test</p> </div> </div> <div class="col-lg-4"> <div class="features-icons-item mx-auto mb-0 mb-lg-3" style="background:red"> <h3>TEST</h3> <p>test</p> </div> </div> </div> </div> </div> </div> </header> 

Answer 2

这是bootply片段的链接。

我认为您的问题与引导布局类添加的填充有关。 我刚刚弄混了一些div，以便它们嵌套在相同数量的引导程序类中（即.col-lg-9 ）。 这很好地安排了一切。

我还必须添加margin-bottom: 0px; 到宽红色div中的段落，这样就不会压低以下三个灰色div。 Add引入了一个新的padding-10类，使其看起来与原始类相似。

试一下样式，我想这会做您想要的，如果没有让我知道的话。

<header class="masthead text-white">
  <div class="overlay"></div>
  <div class="container">
    <div class="row col-lg-9 mx-auto">
      <div class="col-lg-12 mx-auto">
        <div style="background:rgba(0,0,0,0.3);">
          <h1 class="mb-5">H1</h1>
          <p style="margin-bottom: 0px;">We pride ourselves...</p>
        </div>
      </div>
    </div>
    <div class="row col-lg-9 mx-auto">
      <div class="col-lg-4 mx-auto">
          <div class="" style="background:red">
            <h3>TEST</h3>
            <p>test</p>
        </div>
      </div>
      <div class="col-lg-4 mx-auto">
        <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3" style="background:red">
          <h3>TEST</h3>
          <p>test</p>
        </div>
      </div>
      <div class="col-lg-4 mx-auto">
        <div class="features-icons-item mx-auto mb-0 mb-lg-3" style="background:red">
            <h3>TEST</h3>
            <p>test</p>
          </div>
        </div>
      </div>
      </div>
    </header>

Answer 3

尝试这个：

    <div class="overlay"></div>
<div class="container">
  <div class="row">
    <div class="col-lg-9 mx-auto" style="background:rgba(0,0,0,0.3);">
      <h1 class="mb-5">H1</h1>
      <p>We pride ourselves...</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-9 mx-auto" style="padding-left: 0;padding-right: 0;">
    <div class="row">
      <div class="col-lg-4 mx-auto">
        <div class="" style="background:red">
          <h3>TEST</h3>
          <p>test</p>
        </div>
      </div>
      <div class="col-lg-4 mx-auto">
        <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3" style="background:red">
          <h3>TEST</h3>
          <p>test</p>
        </div>
      </div>
      <div class="col-lg-4 mx-auto">
        <div class="features-icons-item mx-auto mb-0 mb-lg-3" style="background:red">
          <h3>TEST</h3>
          <p>test</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>