如何将按钮移动到 <select> 表单的右侧答案

【问题标题】：How to move a button to the right hand of a <select> form如何将按钮移动到 <select> 表单的右侧
【发布时间】：2014-05-13 19:09:48
【问题描述】：

如何将“开始”按钮直接放在选择表单的右侧而不是吹掉？

<div class="col-xs-2">
    <form role="form" method="POST">
        <select class="form-control" name="per_page" required>
            <option>10</option>
            <option>15</option>
            <option>20</option>
            <option>50</option>
            <option>100</option>
        </select>
        <button class="btn btn-success" type="submit" name="per_page" value="Go">Go</button>
    </form>
</div>

（这里是 jsfiddle 的实时版本链接：http://jsfiddle.net/276vq/）

【问题讨论】：

在引导文档的表单上搜索组。

标签： html css forms twitter-bootstrap button

【解决方案1】：

bootstrap css 中的注释行，其中类“col-xs-2”的宽度设置为宽度：16.66666667%；因为如果这个 div 只有这么宽，这些就不能组合在一起。另外，把这个 select.form-control display inline 放在上面，它的宽度不应该是 100%，因为在这种情况下按钮会掉下来。或者在您自己的 css 中执行此操作（在您自己的 css 中覆盖这些属性）。

您也可以将 div 的类更改为col-xs-5，并将其添加到您的 css 中：

.form-control {
    display:inline;
    width:100px;
}

【讨论】：