2015-05-04 3 views
1

В bootstrap 3, как мне создать макет, который заполняет весь экран (высота 100%) и состоит из двух строк следующим образом (каждая высота 50%)? Вид не должен прокручиваться. Спасибо за вашу помощьBootstrap Layout Full Screen 2 Строки

enter image description here

Я начал с этой наценки, но не может получить результаты, мне нужно:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="col-lg-12">Top</div> 
    </div> 
    <div class="row-fluid"> 
     <div class="col-lg-4">Bottem Left</div> 
     <div class="col-lg-4">Bottom Center</div> 
     <div class="col-lg-4">Bottom Right</div> 
    </div> 
</div> 

ответ

0

Bootstrap не предлагает механизм для выполнения компоновки высот 100%. Вам понадобится специальный CSS.

Вот один из подходов. Ваш вопрос оставляет некоторые вещи без внимания, например, что должно произойти в ситуациях переполнения.

.row > div { 
    overflow-y: scroll; 
    height: 100%; 
} 
.row.one-third { 
    height: 33.333%; 
} 
.row.two-thirds { 
    height: 66.667%; 
} 

Demo

Here it is снова с 50% высоты.

0

Я надеюсь, что это поможет

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-12 col-md-12"><h4>Top row</h4></div> 
</div> 
<div class="row"> 
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 1</h4></p></div> 
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 2</h4></div> 
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 3</h4></div></div></div> 
+0

Спасибо за ваш ответ, но это не помогает создать макет, который заполняет экран. Я также не уверен, что вы должны применять класс контейнера к каждому div в каждой строке – Arkady

+0

, он предназначался только для стилизации – Saubar