Два контейнера Bootstrap4 изменяют размеры не одинаково - PullRequest
Новая
       39

Два контейнера Bootstrap4 изменяют размеры не одинаково

1 голос
/ 12 мая 2019

У меня есть эти два контейнера, один на панели навигации, а другой для остальной части страницы, и как только я изменяю размер до точки обзора sm, два контейнера не выравниваются на одной вертикальной линии. Как мне исправить это? 



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

Ответы [ 2 ]

0 голосов
/ 12 мая 2019

Проблема заключается в том, что при ширине 768px и 576px следующий класс Bootstrap 4 по умолчанию .navbar-expand-md>.container переопределяет 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;
  }
}
<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>
0 голосов
/ 12 мая 2019

Одним из быстрых способов было бы добавить px-0 px-sm-3 классы к элементу контейнера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...