0

Добрый день уважаемые. Подскажите пожалуйста как расставить правильно, в нужные места bootstrap классы, что б получить для размеров -sm -xs две колонки, по 5 и 4 изображений в каждой. Как на фото. А при -md и -lg, должно быть как изначально задано 3 колонки по 4 фото - Пример

.wrapen {
  width: 100%;
  height: 100%;
  background-color: #00f;
}

.block {
  width: 100%;
  margin: 1%;
  height: 100px;
  background-color: #666;
  border: 1px solid #f00;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-md-12">
      <div class="wrapen">
        <div class="row">
          <div class="col-md-4 visible-md visible-lg">
            <div class="block"><img src="" alt="img1" /></div>
            <div class="block"><img src="" alt="img2" /></div>
            <div class="block"><img src="" alt="img3" /></div>
          </div>
          <div class="col-md-4 visible-md visible-lg">
            <div class="block"><img src="" alt="img3" /></div>
            <div class="block"><img src="" alt="img4" /></div>
            <div class="block"><img src="" alt="img5" /></div>
          </div>
          <div class="col-md-4 visible-md visible-lg">
            <div class="block"><img src="" alt="img6" /></div>
            <div class="block"><img src="" alt="img7" /></div>
            <div class="block"><img src="" alt="img8" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Не могу понять как работать когда изображений не чётное количество Рисунок колонки

2
  • Блок с картинками <div class="block"> не нужен, сетка bootstrap в принципе не сложная, что бы так расставить, надо: col-sm-6 col-xs-6 (то есть по половине экрана на одну группу картинок), не совсем понятно какого эффекта вы хотите добиться? Что бы был синий фон по краям, то padding:2px - в помощь. А если не четное что должно происходить по вашей логике?
    – Алёна
    24 фев 2017 в 18:33
  • Ваш комментарий ни чего не прояснил. Был дан пример с подключенной библиотекой(Bootstrap), и поставлен вопрос - как оптимизировать верстку под устройства с маленьким разрешением по заданной картинки. 24 фев 2017 в 18:41

2 ответа 2

1

Вам нужно каждую картинку обернуть в col-..

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img1" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img2" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img3" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img4" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img5" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img6" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img7" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img8" /></div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
    <div class="block"><img src="" alt="img9" /></div>
  </div>
</div>

Тогда картинки автоматом будут выстраиваться в 3 колонки на больших экранах и в 2 на маленьких.

UPD: В этой /bootstrap/4.0.0-alpha.6/css/bootstrap.min.css вообще не видно классов для xs разрешения. Из-за этого не работает сетка col-xs-6 и изображения выстраиваются в одну колонку. Можно или использовать стабильную версию 3 или самостоятельно добавить классы xs, взяв их из 3 бутстрапа.

7
  • совет не работает codepen.io/anon/pen/JWoRyq 24 фев 2017 в 21:15
  • Вижу, что на xs- почему-то получается 1 колонка. В остальном вроде все верно. Сейчас с xs разберусь..
    – alex
    24 фев 2017 в 21:24
  • Это сильно похоже на глюк альфы бутстрапа 4. С 3-м бутстрапом все работает как надо. Попробуйте подключить его <link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    – alex
    24 фев 2017 в 21:46
  • Блин, сначала обрадовался что оно собирается. Потом убедился что и при разрешении <970px оно уже схлопывается в две колонки. codepen.io/anon/pen/LWEzoj Короче снова не то 25 фев 2017 в 10:32
  • Так вы в своем вопросе и писали, что надо для sm и xs 2 колонки. При ширине <992 это уже sm. Уточните тогда вопрос, что вы все-таки хотите получить.
    – alex
    25 фев 2017 в 13:33
0

Попробуй это https://codepen.io/lukas-pierce/pen/dNBYLO

<div class="row">

  <div class="col-lg-3 col-md-4 col-sm-6">
    <div class="block">
      <div class="block-inner">1</div>
    </div>
  </div>

  ........................

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.