Я хочу, чтобы достичь сетки, как показанный ниже:Twitter Bootstrap сетки:
Я смотрел в систему сетки Twitter Bootstrap, но так как она ориентирована на строки, я не могу видеть как добиться этого.
Есть ли способ сделать это, или я должен придерживаться вручную css?
Вы можете использовать Bootstrap сетку с некоторыми пользовательских стилей:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}<link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>Вы можете вкладывать Ряды и перевалы:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
См http://getbootstrap.com/css/#grid под "гнездования Столбцы"
Я просто хочу что-то спросить, почему это для каждой вложенной строки, вы указали col-md-12? Я имею в виду, основываясь на том, что я читал, каждая строка делится на 12 столбцов. В вашем коде это похоже на 24 столбца. Не могли бы вы просветить миров? –
Каждая строка состоит из 12 столбцов, если у вас есть еще один перерыв, это просто еще один способ сказать ширину: 100% - вам не нужно это, чтобы достичь макета в исходном вопросе. –
Просто установите 2 родителей шириной col-xs-* с детьми
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>Подробнее о Grid system.
Почему использование class = "col-xs-4 col-sm-4 col-md-4 col-lg-4"? Я думал, вам нужно всего лишь использовать самый маленький из них, который вы хотели бы сделать похожим на кодировку, поэтому использование только xs должно сделать тот же эффект, не так ли? –
@RomanRdgz Что вы за замечание мое плохое. –
Не лучше ли избежать фиксированных высот? Я хочу, чтобы он правильно масштабировался на всех устройствах. Как мне изменить код css? –
Конечно, я просто использовал высоты для демонстрации, вам не нужно, вы можете удалить их и оставить блоки гибкими. – dfsq