Як отримати 3-5-4 макета сітки за допомогою Bootstrap? - twitter-bootstrap, grid-layout

Я намагався створити макет сітки, як описано вище з Bootstrap, але не міг розібратися, як це зробити, будь-яка пропозиція?

Відповіді:

Це в основному досить просто, використовуючи вкладені рядки. Проблема виникає, якщо ви хочете рівно 3/5 стовпців для лівої двох. Ви можете наблизитися, просто зробивши це, що робить його майже правильним, чи достатньо цього?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-4">IMAGE1</div>
<div class="col-xs-8">TEXT1</div>
</div>
<div class="row">
<div class="col-xs-4">IMAGE2</div>
<div class="col-xs-8">TEXT3</div>
</div>
</div>
<div class="col-xs-4">SIDEBAR</div>
</div>
</div>

Якщо вам потрібно точно 3/5/4 макет, то тільки розумний спосіб зробити це в той же час використовувати Bootstrap буде налаштовувати систему сітки для отримання деталізації. У цьому випадку вам потрібно зробити його 24-ма колонками, що зробить вашу сітку такою:

<div class="container">
<div class="row">
<div class="col-xs-16">
<div class="row">
<div class="col-xs-9">IMAGE1</div>
<div class="col-xs-15">TEXT1</div>
</div>
<div class="row">
<div class="col-xs-9">IMAGE2</div>
<div class="col-xs-15">TEXT3</div>
</div>
</div>
<div class="col-xs-8">SIDEBAR</div>
</div>
</div>