Очистка сетки столбцов бутстрапа

Question

Как я знаю, столбцы сетки создаются путем указания количества доступных столбцов, которые вы хотите развернуть. Что делать с пустым пространством при создании столбцов и видеть, что сумма меньше 12?

http://www.bootply.com/dmPaHyDcUg

<div class="container well"> 
    <div class="row"> 
     <div class="col-md-1"> 
     <label>Card<br> number</label> 
     </div> 

    <div class="col-md-1"> 
     <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text"> 
    </div> 

    <div class="col-md-1"> 
     <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text"> 
    </div> 

    <div class="col-md-1"> 
     <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text"> 
    </div> 

    <div class="col-md-1"> 
     <input data-length="4" class="txtinput" placeholder="XXXX" maxlength="4" type="text"> 
    </div> 
    </div> 
</div> 

Answer 1

используется смещение для компенсации!

Допустим, вы хотите 4 цв широкого DIV центра вы можете сделать это:

<div class="col-md-4 col-md-offset-4"></div> 

Это будет выглядеть следующим образом: (а строки 12, верно?)

| выключено 4 | 4 col | - - |

теперь у вас есть 4 Col широкий DIV в середине (смещает его 4 COLS вправо + недостающие 4 COLS)

Или, скажем, вы хотите 7 Col широкий DIV выровненный вправо:

<div class="col-md-7 col-md-offset-5"> 

это будет выглядеть следующим образом:

| выключено 5 | __7 c o l__ |

Как объяснено здесь: Bootstrap Column Offset

Перемещение столбцов вправо с помощью .col-Md-offset- * классы. Эти классы увеличивают левое поле столбца на * столбцы. Например, .col-md-offset-4 перемещается .col-md-4 на четыре столбца.