Положение элементов в Bootstrap - PullRequest
Новая
       18

Положение элементов в Bootstrap

0 голосов
/ 22 декабря 2018

У меня 7 изображений.Мне нужно увидеть 5 изображений в одном ряду и еще 2 изображения в другом ряду внизу в центре.Я сделал 5 изображений подряд, но я не могу расположить остальные 2 изображения в центре внизу.Кроме того, в версии responsive мне нужно 2 изображения друг под другом и 1 изображение в центре, и они должны иметь border-radius: 100%, но это не работает.Что не так с моим кодом?Это HTML: 

@media all and (max-width: 1024px) {
  .ring {
    border-radius: 100%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.1s" style="border-radius: 0;">
        <img src="img/1.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.3s" style="border-radius: 0;">
        <img src="img/2.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6 hightechxl">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.5s" style="border-radius: 0;">
        <img src="img/1.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.7s" style="border-radius: 0;">
        <img src="img/2.png" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.9s" style="border-radius: 0;">
        <img src="img/1.png" style="border-radius: 100%;">
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="1.1s" style="border-radius: 0;">
        <img src="img/2.png" style="border-radius: 100%; width: 150px; height: 150px;">
      </div>
    </div>
    <div class="col-sm">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="1.3s" style="border-radius: 0;">
        <img src="img/1.png" style="border-radius: 100%;">
      </div>
    </div>
  </div>
</div>

Я использую bootstrap4, если есть другое решение без начальной загрузки, пожалуйста, покажите мне, как.

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

Вы можете использовать flex, например, установить ширину 18% - это чуть меньше 20%, что может занять 5 элементов и даст вам место для поля.

Использовать медиа-запрос для второговерсия и установите flex-base на 48%. 

.cont{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.item{
  flex-basis: 18%;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid black;
  height: 50px;
  margin: 5px;
}


@media all and (max-width: 1024px) {
  .item {
    flex-basis: 48%;
  }
}
<div class="cont">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
0 голосов
/ 23 декабря 2018

Я просто показываю код для вас по адресу: https://codepen.io/tien-bui/pen/mamemO

Итак, основные идеи Bootstrap заключаются в том, чтобы в каждой строке было по 12 столбцов, поэтому, если вы хотите отобразить 5 элементов в 1 строке, вам нужно установитьпрефикс col в 2. Например: target маленький экран col-sm-2, target большой экран col-lg-2.И вам нужно нацелить все устройства, чтобы добиться отзывчивости, это будет выглядеть так: 

<div class="col-lg-2 col-md-2 col-sm-6 col-6"></div>
...