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

添加此CSS

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

Answer 2

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

横向展开的100个表单元素bootstrap

2 个答案: