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%; 
}