100表單元素引導

Question

橫向傳播我有一個看起來像這樣（長單柱）表單元素

我想他們是這樣的（長柱破碎均勻地分成多個元素）

我試圖用表格內聯，但這樣結束了：

在這裏，我我的破CSS：

<div class="contaier"> 
<div class="row " role="main row" style="height:100% !important;"> 
    <form class="form-inline"> 


<div class="col-md-3 col-md-offset-1"> 


<fieldset class="form-group row"> 
     <div class="form-check"> 
     <label class="form-check-label"> 
     <input class="form-check-input" type="radio" name="alma" id="gridRadios2" value="alma"> 
     alma 
     </label> 
    </div> 
</fieldset> 

<fieldset class="form-group row"> 
     <div class="form-check"> 
     <label class="form-check-label"> 
     <input class="form-check-input" type="radio" name="assomption" id="gridRadios2" value="assomption"> 
     assomption 
     </label> 
    </div> 
</fieldset> 
<!-- More of fieldset --> 

    <button type="submit" class="btn btn-primary">Next</button> 

</div> <!--/col-md-3 col-md-offset-1 --> 
</form> 

</div> <!-- /row (main row) --> 
</div> <!--/container --> 

我試着設置高度100％和不同的窗體樣式，但無濟於事。

有沒有辦法實現這一點，而無需創建多個col-md-3列？那麼它會自動將一個長列分成多個列？

https://jsfiddle.net/4cfhg0kq/

謝謝

Answer 1

Please see below code to achieve the solutions:- 
with No extra Code in CSS just use one simple wrapper on form element and give column CSS property. 

HTML code:- 

<div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <form class="form-horizontal"> 
        <div class="custom-col"> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 

         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 

         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 

         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
         <div class="radio"> 
          <label> 
           <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
           Option one is 
         </label> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
     <!-- /row (main row) --> 
    </div> 
    <!--/container --> 

CSS code:- 
.custom-col { 
      -webkit-column-count: 3; 
      /* Chrome, Safari, Opera */ 
      -moz-column-count: 3; 
      /* Firefox */ 
      column-count: 3; 
      -webkit-column-gap: 40px; 
      /* Chrome, Safari, Opera */ 
      -moz-column-gap: 40px; 
      /* Firefox */ 
      column-gap: 40px; 
      -webkit-column-width: 100px; 
      /* Chrome, Safari, Opera */ 
      -moz-column-width: 100px; 
      /* Firefox */ 
      column-width: 100px; 
     } 

Answer 2

添加此CSS的答覆

.form-check{ 
    float:left; 
    width:25%; 
}