两个 Bootstrap4 容器的大小调整方式不同

Question

我有这两个容器，一个在导航栏中，另一个用于页面的其余部分，当我调整大小直到 sm-view 点时，这两个容器没有在同一垂直线上对齐。我该如何更正它？



      <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-custom sticky-top">
            <div class="container">
 <a class="navbar-brand" href="#"><i class='far fa-image' style='font-size:24px'></i> IMGS</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

              <div class="collapse navbar-collapse" id="navbarSupportedContent" >
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>
                <ul class="navbar-nav mr-0">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Sign Up</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                  </li>
                </ul>
              </div>
            </div>
        </nav>

        <div class="container my-3">
            <div class="jumbotron py-4 mb-3">
            <h1><i class='fas fa-camera-retro' style='font-size:40px'></i> The Image Gallery</h1>
            <p>A bunch of beautiful images that I didn't take(except the first one!)</p>
        </div>
            <div class="row ">
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1481889617387-82a8f2413b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551356279-8337da8863d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551897628-d053c089e823?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1555939765-9b78f509d500?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1516911588919-bf6b970eaf32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551222998-8a604fda1d22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1550977088-b31835bf616d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            <div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551290465-0ac783e20542?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
            </div>
        </div>
      </body>
    </html>

Answer 1

一种快速的方法是将 px-0 px-sm-3 类添加到容器元素。

Answer 2

问题是在宽度768px & 576px之间，下面的默认Bootstrap 4 class .navbar-expand-md>.container覆盖了padding-left:15px 和 padding-right:15px 的 container class;

@media (max-width: 767.98px)
{.navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
}

到修复，只是做

 @media screen and (min-width:576px) and (max-width:768px){
        .navbar>.container{ padding-right: 15px !important;padding-left: 15px !important;}
    }

工作代码示例 此处：

@media screen and (min-width:576px) and (max-width:768px) {
  .navbar>.container {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark bg-custom sticky-top">
  <div class="container">

    <a class="navbar-brand" href="#">
      <i class='far fa-image' style='font-size:24px'></i> IMGS</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav mr-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container my-3">
  <div class="jumbotron py-4 mb-3">
    <h1>
      <i class='fas fa-camera-retro' style='font-size:40px'></i> The Image Gallery</h1>
    <p>A bunch of beautiful images that I didn't take(except the first one!)</p>
  </div>
  <div class="row ">
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1481889617387-82a8f2413b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1551356279-8337da8863d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1551897628-d053c089e823?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1555939765-9b78f509d500?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1516911588919-bf6b970eaf32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1551222998-8a604fda1d22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1550977088-b31835bf616d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
    <div class="col-sm-6 col-md-4 my-2">
      <img src="https://images.unsplash.com/photo-1551290465-0ac783e20542?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid">
    </div>
  </div>
</div>

两个 Bootstrap4 容器的大小调整方式不同

The two Bootstrap4 containers aren't resizing the same way

css

containers

resize

bootstrap-4