<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>
给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>
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>