Question

我正在尝试使用css bootstrap框架将一个选择菜单放在同一行上。

这就是我所做的

<div class="input-group">

    <select class="form-control columnMenu" name="param[]" id="somethingCool" data-columntype="null" required="">
    <option value="" date-columntype="" selected="">Select a column</option>
    <option value="currentDate" date-columntype="datetime">Current Date</option>
    <option value="currentUtcDate" date-columntype="datetime">Current UTC Date</option>
    <option value="recordCounter" date-columntype="integer">Record Counter</option>
    </select>

    <button type="button" class="btn btn-default btn-sm removeOneParameter">
    <span class="glyphicon glyphicon-remove"></span>Delete<
    /button>

</div>

但是，按钮在第二行跳跃。

这是一个展示我的代码的小提琴手

https://jsfiddle.net/s2tphgpf/

如何使用按钮排列菜单？

Answer 1

尝试使用像这样的显示表来包装所有内容

<div style="display: table">

   <div style="display: table-row">

       <div style="display: table-cell">
             <select class="form-control columnMenu" name="param[]" id="somethingCool" data-columntype="null" required="">
             <option value="" date-columntype="" selected="">Select a column</option>
             <option value="currentDate" date-columntype="datetime">Current Date</option>
             <option value="currentUtcDate" date-columntype="datetime">Current UTC Date</option>
             <option value="recordCounter" date-columntype="integer">Record Counter</option>
             </select>
        </div>

        <div style="display: table-cell">
             <button type="button" class="btn btn-default btn-sm removeOneParameter">
             <span class="glyphicon glyphicon-remove"></span>Delete
             </button>
        </div>

   </div>

</div>

https://jsfiddle.net/s2tphgpf/2/

如何将选择菜单与css bootstrap在同一行上的按钮对齐？

1 个答案: