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

一种快速的方法是将{{1}}类添加到容器元素。

Answer 2

问题是在宽度768px和576px之间，以下默认的Bootstrap 4类.navbar-expand-md>.container覆盖了{{1}的padding-left:15px和padding-right:15px }类；

container

要修复，只需

@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;
  }
}

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

2 个答案: