在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>