Bootstrap под мобильные и планшеты. Выравнивание.
Вложений: 1
Добрый день уважаемые, помогите, пожалуйста разобраться как данный пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<style>
.wrapen{
width: 100%;
height: 100%;
background-color: #00f;
}
.block{
width: 100%;
margin: 1%;
height: 100px;
background-color: #666;
border: 1px solid #f00;
}
</style>
</head>
<body>
<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>
</body>
</html>
codepen.io/anon/pen/BWBXEx Отобразить для размеров -sm -xs в две колонки, по 5 и 4 изображений в каждой. Как на фото. (при -md b -lg, должно быть как изначально задано 3 колонки по 4 фото) |
| Часовой пояс GMT +3, время: 06:36. |