Выравнивание колонок в bootstrap

354

14 ноября 2017, 23:46

Всем доброго дня.

Помогите пожалуйста. Изучаю бутстрап. Не могу понять следующее: http://kurakste.fvds.ru/prj4/ в этом примере хочу добиться что бы правая колонка последней строчки выравнивалась по правому краю (была на одном уровне с правым краем слайдера) левая соответственно выравнивалась с левым краем и была на одном уровне с ним. У меня получается выровнять либо по одному либо по второму краю. Как сделать что бы кроя первой и последней колонки последней строчки были на одном уровне с краями слайдера?

Answer 1

Смотреть развернув на всю страницу.

.justify-content-end.no-gutters { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: justify !important; 
  -ms-flex-pack: justify !important; 
  justify-content: space-between !important; 
}

<link href="http://kurakste.fvds.ru/prj4/main.css" rel="stylesheet"/> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
      <div class="row"> 
        <div class="col-lg-2"> 
            <img src="http://kurakste.fvds.ru/prj4/honey.jpg" alt="" width="150"> 
        </div> 
        <div class="col-lg-10"> 
          <h1>Мишки любят мед!</h1> 
       </div> 
      </div> 
      <div class="row"> 
        <div class="col-lg-12"> 
            <ul class="nav"> 
              <li class="nav-item"> 
                <a class="nav-link active" href="#">Active</a> 
              </li> 
              <li class="nav-item"> 
                <a class="nav-link" href="#">Link</a> 
              </li> 
              <li class="nav-item"> 
                <a class="nav-link" href="#">Link</a> 
              </li> 
              <li class="nav-item"> 
                <a class="nav-link disabled" href="#">Disabled</a> 
              </li> 
            </ul> 
       </div> 
      </div> 
       <div class="row"> 
           <div class="col-lg-12"> 
               <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> 
                <div class="carousel-inner"> 
                   <div class="carousel-item"> 
                    <img class="d-block w-100" src="http://kurakste.fvds.ru/prj4/banners/honey1.jpg" alt="First slide"> 
                  </div> 
                  <div class="carousel-item active"> 
                    <img class="d-block w-100" src="http://kurakste.fvds.ru/prj4/banners/honey2.jpg" alt="Second slide"> 
                  </div> 
                  <div class="carousel-item"> 
                    <img class="d-block w-100" src="http://kurakste.fvds.ru/prj4/banners/honey2.jpg" alt="Third slide"> 
                  </div> 
                </div> 
               </div> 
           </div> 
       </div> 
       <div class="row justify-content-end no-gutters"> 
           <div class="col-lg-3"> 
               <div class="card" > 
                 <img class="card-img-top" src="http://kurakste.fvds.ru/prj4/banners/honey1.jpg" alt="Card image cap"> 
                 <div class="card-body"> 
                   <h4 class="card-title">Мед</h4> 
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
                   <a href="#" class="btn btn-primary">Купить</a> 
                 </div> 
               </div> 
           </div> 
           <div class="col-lg-3"> 
               <div class="card"> 
                 <img class="card-img-top" src="http://kurakste.fvds.ru/prj4/banners/honey3.jpg" alt="Card image cap"> 
                 <div class="card-body"> 
                   <h4 class="card-title">Соты</h4> 
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
                   <a href="#" class="btn btn-primary">Купить</a> 
                 </div> 
               </div> 
           </div> 
           <div class="col-lg-3"> 
               <div class="card" > 
                 <img class="card-img-top" src="http://kurakste.fvds.ru/prj4/banners/honey2.jpg" alt="Card image cap"> 
                 <div class="card-body"> 
                   <h4 class="card-title">Прополис</h4> 
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> 
                   <a href="#" class="btn btn-primary">Купить</a> 
                 </div> 
               </div> 
           </div> 
       </div> 
    </div>