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