Основной учебник Bootstrap

Bootstrap плагины

Пример системы сеток Bootstrap: мобильные устройства, планшеты, настольные компьютеры Пример системы сеток Bootstrap: выстраивание по горизонтали

Пример системы сетки Bootstrap: средние и крупные устройства

в Пример: стекающиеся горизонтальные Мы уже рассмотрели базовую систему сетки. Здесь мы используем 2 div и разделяем их на 50%/50% в середине окна просмотра:

<div>...</div>
<div>...</div>

Но на больших устройствах вы в конечном итоге получите 33%/66%. Поэтому то, что нам нужно сделать, это подготовить изменение ширины столбцов на точки разрыва:

<div>...</div>
<div>...</div>

теперь Bootstrap в средних устройствах ищет классы с md классов, и используйте их. В больших устройствах ищутся классы с lg классов, и используйте их. В данном примере наши 2 div будут разделены на 50%/50% с 33%/66%. Пожалуйста, посмотрите на следующий пример для проверки. (Здесь для каждого столбца отдельно определены стили, что можно избежать.)

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
　　　<title>Bootstrap пример - средние и крупные устройства</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6 col-lg-4"　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　время, чтобы работать и страдать, чтобы быть счастливыми　
　　　　　　　　　　　　даже в самом малом, кто не нашел бы способа, чтобы мы могли работать и страдать　
　　　　　　　　　　　　не для того, чтобы извлечь из нее что-то, что я могу использовать, чтобы получить выгоду　
　　　　　　　　　</p>
　　　　　　　　　<p>Таким образом, чтобы понять, откуда взялся этот грех, который все мы носим с собой, и чтобы понять, почему мы любим voluptatem　
　　　　　　　　　　　　обвинять в страданиях и хвалить, чтобы понять все, что я вижу, и чтобы понять, что я сам　
　　　　　　　　　　　　которая, по его мнению, является истинной и как будто архитектором счастливо жизни　
　　　　　　　　　　　　явно объяснимы　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Таким образом, чтобы понять, откуда взялся этот грех, который все мы носим с собой, и чтобы понять, почему мы любим voluptatem　
　　　　　　　　　　　　обвинять в страданиях и хвалить
　　　　　　　　　</p>
　　　　　　　　　<p>Никто не может не страдать, чтобы страдать, как будто страдание само по себе приятно　
　　　　　　　　　　　　Всегда можно, кто не страдает, чтобы страдать, как будто страдание само по себе приятно　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Проверьте, нажмите ‹/›

Результаты показаны ниже: