Question

我有一个表单，我实现了form-inline和bootstrap-select。这对于屏幕宽度＆gt;工作正常。 768，但是当我尝试将其调整为ipad大小时，它不再是内联的。如何解决我的问题：

因为我将data-width="auto"设置为bootstrap-select，它不是100％（1列）或50％（2列，这在ipad情况下最理想的是并排显示两个选择框）。我试过很多方法，例如将属性数据宽度重置为＆＃34; 50％＆＃34;然后拨打$('.selectpicker').selectpicker(render);，但失败了，该怎么办？
复选框自动分为四行，对于ipad尺寸，我认为最好将它们保持在一行，我该怎么办？

JSFiddle链接：http://jsfiddle.net/nc16ntwq/代码无法显示

＆＃13;

<form class="form-inline" style="margin:10px 0px;">
    <div class="form-group">
        <select id="date" name="date" class="date selectpicker"  data-width="auto">
            <option value='01'>01</option>
            <option value='02'>02</option>
        </select>
    </div>
    <div class="form-group">
        <select id="dateYear" name="dateYear" class="date selectpicker"  data-width="auto">
            <option value="1984">1984</option>
            <option value="1985">1985</option>
            <option value="1986">1986</option>
            <option value="1987">1987</option>
        </select>
    </div>
    <div class="form-group">
        <select id="toDate" name="toDate" class="date selectpicker" data-width="auto">
            <option value='01'>01</option>
            <option value='02'>02</option>
            <option value='03'>03</option>
        </select>
    </div>
    <div class="form-group">
        <select id="toDateYear" name="toDateYear" class="date selectpicker"  data-width="auto">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019" selected>2019</option>
        </select>
    </div>
    <div class="form-group">
        <div class="checkbox">
            <label>
            <input id="v1" type="checkbox" checked> Value 1
            </label>
        </div>
        <div class="checkbox">
            <label>
            <input id="v2" type="checkbox" checked> value 2 
            </label>
        </div>
        <div class="checkbox">
            <label>
            <input id="v3" type="checkbox"> value 3
            </label>
        </div>
        <div class="checkbox">
            <label>
            <input id="v4" type="checkbox"> Values 4
            </label>
        </div>
    </div>
    </form>

＆＃13;

Answer 1

JSFIddle。我只为下拉菜单做这个。只需将此添加到CSS

即可

.form-inline .form-group {
   display: inline-block;
   margin-bottom: 0;
   vertical-align: middle;
}

屏幕小于768的内联表单元素

1 个答案: