Question

复制了此代码

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

我添加了width:50%以防止输入占用100％宽度，删除了最后一个input-group，我尝试用form-group包裹按钮，但这并没有解决任何问题。输入和按钮仍然在单独的行上。我希望它们就像在bootstrap的文档中一样，它们都在一行中。

看着firebug，我找不到bootstrap doc如何限制宽度。他们的.bs-example课程没有任何结果：

margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;

position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}

但不知何故，他们的文档显示内联形式在一行上。

jsfiddle

Answer 1

将按钮移动到输入组 http://jsfiddle.net/5zr4j4mv/2/

    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        <button type="submit" class="btn btn-primary">Transfer cash</button>
    </div>
  </div>

Bootstrap内联表单在不同的行上有按钮

1 个答案: