Question

我在<div>中有三个元素form-inline。一个按钮和两个输入框。然而，我无法让<button>成为该行中的第一个元素：

<button></button><input type="text"><input type="text">

按钮显示在两个输入元素之后。

HTML

<div class="form-inline">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Defaults:</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
      <button type="button" class="btn btn-primary form-control">Select Options</button>
      <input type="text" class="form-control col-md-3 col-xs-12" />
      <input type="text" class="form-control col-md-3 col-xs-12" />
  </div>
</div>

Bootply： http://www.bootply.com/hkprFNmeLe

Answer 1

您忘记了col-x-y ...

上的网格button课程

<button type="button" class="btn btn-primary form-control col-md-3 col-xs-12">Select Options</button>

请参阅http://www.bootply.com/EKzV0GZpKX#

Answer 2

将按钮浮动到左侧：

.form-inline button{float:left;}

.form-inline input{float:right;}

Answer 3

您需要从col-*中移除input，因为根据docs，它不会在表单中使用

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="form-inline">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Defaults:</label>
      <div class="col-md-6 col-sm-6 col-xs-12">
          <button type="button" class="btn btn-primary form-control">Select Options</button>
          <input class="form-control" type="text">
          <input class="form-control" type="text">
      </div>
  </div>

＆＃13;

Bootstrap中的元素顺序＆＃34; form-inline＆＃34;类

3 个答案: