html - 100 个表单元素水平展开 bootstrap

Question

我有这样的表单元素(长单列)

我希望它们是这样的(长列平均分成多个)

我尝试使用 form-inline，但结果是这样的:

这是我损坏的 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;
        }