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

Question

I have the following bootply snippet: https://www.bootply.com/FHwoiollCJ

As you can see, I have an element that is 75% of the width.

I'd like to center align the 3 items underneath this box so that the 1st and 3rd boxes don't overhang. How do I do this?

<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

You could use a nested grid solution: 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

Here's a link to a bootply snippet .

I think your issue is with the padding added by bootstrap layout classes. I've just juggled a few of your divs so that they are nested in an equal number of bootstrap classes (ie .col-lg-9 ). This has lined things up nicely.

I also had to add margin-bottom: 0px; to the paragraph in your wide red div so that the three grey divs below weren't pushed down. Add introduced a new class padding-10 so that it looks similar to the original.

Play around with the styling and I think this will do what you want, if not let me know.

<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

try this:

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