Bootstrap форма слияния строк

Question

мне нужно создать форму, используя тип входа, как изображение в приложении, мой вопрос, как я могу объединить строки выглядеть изображения

может мне помочь и объяснить, как это сделать?

Answer 1

Вам просто нужны некоторые вложенные строки и col div. Основной пример, который я издевался над Bootply. Также добавьте код для справки.

Суть в том, что у вас есть 12 столбцов для работы. Если ваш первый столбец равен 12, а затем второй - 8 | 4, то ваш 8 столбцов может иметь еще 12 внутри. Это может произойти бесконечно, технически, но в конце концов, вы не будете в состоянии иметь ничего разборчивого :)

<!-- main outer row --> 
<div class="row"> 
    <div class="col-sm-12"> 
main row 
<div class="row"> 
    <div class="col-sm-8"> 
    Left 
    <div class="row"> 
     <div class="col-sm-1"> 
     1 col 
     </div> 
     <div class="col-sm-3"> 
     3 col 
     </div> 
     <div class="col-sm-2"> 
     2 col 
     </div> 
     <div class="col-sm-2"> 
     3 col 
     </div> 
     <div class="col-sm-4"> 
     4 col 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-3"> 
     3 col 
     </div> 
     <div class="col-sm-2"> 
     2 col 
     </div> 
     <div class="col-sm-1"> 
     1 col 
     </div> 
     <div class="col-sm-4"> 
     4 col 
     </div> 
     <div class="col-sm-2"> 
     2 col 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12"> 
     12 col 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6"> 
     6 col 
     </div> 
     <div class="col-sm-6"> 
     6 col 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-4"> 
    Right 
    <br><br> 
     all the data 
     <br> 
     all the data 
     <br> 
     all the data 
     <br> 
     all the data 
     <br>all the data 
     <br> 
     all the data 
     <br> 


    </div> 
</div> 

http://www.bootply.com/o2Rnuh4gqQ