Заполните полноэкранный режим с помощью twitter bootstrap

Question

Я пытаюсь сделать экран полностью заполненным дизайном без пустых вещей вокруг, а также быть отзывчивым, я пробовал его до сих пор.

Также хотите размер текстового поля и кнопку входа.

Demo fiddle

Result Screen

Выходной ток

Answer 1

После TWB 2 Синтаксис:

заменить

<div class="container"> 

по

<div class="container-fluid"> 

Answer 2

надеюсь, что это поможет вам, и нужно, чтобы добавить свой DIV с width:100%

.container-full { 
margin: 0 auto; 
width: 100%; 
} 

demo

Answer 3

Добавить -fluid в свой container класс:

<div class="container-fluid"> 
</div> 

Даже тогда, Bootstrap добавляет 20px обивка обе стороны документа, который, конечно, - вы можете удалить, как показано ниже:

<style type="text/css"> 
    #full-width { 
     padding: 0; 
    } 
</style> 

<div id="full-width" class="container-fluid"> 
</div> 

Примерный сценарий: http://jsfiddle.net/qFKdF/1/

Answer 4

бесстыдного плагин, но я только что выпустил проект с открытым исходным кодом для именно этого вопроса. Он играет хорошо с начальной загрузки, но дает вам внешний вид вы собираетесь для всего несколько строк кода:

https://github.com/rknell/snappyapps-layout

<div class="sa-container"> 
    <div class="sa-layout horiztonal"> 
     <div>Sidebar (obviously you will need to style this with colours etc)</div> 
     <div class="grow">Content</div> 
    </div> 
</div>