bootstrap怎么让button和input在一行

Question

<form class="form-inline" action="/index.php/domain_admin/updateIframeUrl" method="POST">
    <div class="form-group">
        <input type="text" class="form-control" value="">
        <button class="btn btn-sm btn-danger">-</button>
    </div>
</form>

Answer 1

form-control有两个属性影响换行.

.form-control {
    width:100%;
    display: block;
}

可以新增一个class

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

这个css要放到bootstrap.css下面

html如下

<div class="form-group">
        <input type="text" class="form-control form-control-xxx" value="">
        <button class="btn btn-sm btn-danger">-</button>
    </div>

Answer 2

给form添加form-inline 在页面width>＝768px时 .form-control和.form-group都是inline-block,两者是同一行的
若要去处width的限制，可以给form添加.form-horizontal, 之后便可以利用栅格系统布局：

<form class="form-horizontal" action="/index.php/domain_admin/updateIframeUrl" method="POST">
    <div class="form-group">
        <input type="text" class="form-control col-xs-8" value="">
        <div class="col-xs-4">
            <button class="btn btn-sm btn-danger">-</button>
        </div>
    </div>
</form>