Question

我正在使用bootstrap，我希望彼此相邻的两个列表框（一个代表另一年的月份）和2个将所选月/年移动到另一个列表框的按钮。当我将所有这些放在我的页面中时，它太宽了（列表框是为了满足需要而扩展的方式）。如何让这些列表框的宽度减小，但高度和外观与普通的bootstrap表单控件列表框相同？

<div class="form-inline">
            <label for="selectMonth" class="control-label col-md-5">Period:</label>
            <div class="col-md-7" style="display:inline">

                <select id="selectMonth" class="form-control" size="4">
                    <option>Jan</option>
                    <option>Feb</option>
                    <option>Mar</option>
                    <option>Apr</option>
                    <option>May</option>
                    <option>Jun</option>
                    <option>Jul</option>
                    <option>Aug</option>
                    <option>Sep</option>
                    <option>Oct</option>
                    <option>Nov</option>
                    <option>Dec</option>
                </select>

                <select id="selectYear" class="form-control" size="4">

                </select>

                <div class="btn-group-vertical">
                    <button type="button" class="btn btn-default btn-primary" id="buttonMoveAll">>></button>
                    <button type="button" class="btn btn-default btn-primary" id="buttonMoveOne">></button>
                </div>

                <select id="selectFinal" class="form-control" size="4">

                </select>
            </div>
        </div>

Answer 1

试试这个JSFiddle

<div class="form-inline col-md-10">
    <label for="selectMonth" class="control-label col-md-2">Period:</label>

    <div class="col-md-4" style="display:inline">
        <select id="selectMonth" class="form-control" size="4">
            <option>Jan</option>
            <option>Feb</option>
            <option>Mar</option>
            <option>Apr</option>
            <option>May</option>
            <option>Jun</option>
            <option>Jul</option>
            <option>Aug</option>
            <option>Sep</option>
            <option>Oct</option>
            <option>Nov</option>
            <option>Dec</option>
        </select>
    </div>

    <div class="col-md-4" style="display:inline"> 
        <select id="selectYear" class="form-control" size="4"></select>
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default btn-primary" id="buttonMoveAll">>></button>
            <button type="button" class="btn btn-default btn-primary" id="buttonMoveOne">></button>
        </div>
        <select id="selectFinal" class="form-control" size="4"></select>
    </div>
</div>

Bootstrap和多个选择控件内联太大

1 个答案: