Question

我正在尝试使用bootstrap并排对齐两个输入。如下测试常规div非常有用：

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

但这总是推到第一个下面的第二个输入。

<div class="row">
            <div class="col-md-2 input-group">
                <span class="input-group-addon">Income $</span>
                <input type="number" id="income" class="form-control" placeholder="0">
                <span class="input-group-addon">.00</span>
            </div>
            <div class="col-md-2 col-md-offset-2 input-group">
                <span class="input-group-addon">Mortgage Payment $</span>
                <input type="number" id="mortgagepayment" class="form-control" placeholder="0">
                <span class="input-group-addon">.00</span>
            </div>
        </div>

任何线索？

Answer 1

与给定的HTML一样，没有<form>元素。

这是 Demo 使用.controls-row和.control-group

<div class="container">    
  <div class="controls-row row">
    <div class="control-group col-md-6">
        <div class="input-group"> 
            <span class="input-group-addon">Income $</span>
            <input type="number" id="income" class="form-control" placeholder="0">       
            <span class="input-group-addon">.00</span>
        </div>
    </div>
    <div class="control-group col-md-6">
        <div class="input-group"> 
            <span class="input-group-addon">Mortgage Payment $</span>
            <input type="number" id="mortgagepayment" class="form-control" placeholder="0"> 
            <span class="input-group-addon">.00</span>
        </div>
    </div>
  </div>
</div>

Answer 2

您应该使用“form-inline”Bootstrap类来实现此目的：

<form class="form-inline">
<div class="form-group">
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">Income $</span>
            <input type="number" id="income" class="form-control" placeholder="0">
            <span class="input-group-addon">.00</span>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group" style="width: 250px;">
            <span class="input-group-addon">Mortgage Payment $</span>
            <input type="number" id="mortgagepayment" class="form-control" placeholder="0">
            <span class="input-group-addon">.00</span>
        </div>
    </div>
</div>
</form>

看看HERE

Answer 3

我想你已经提出了一些问题，但我会尽力帮助。

在线跟踪BS3.x文档后，我注意到您没有将表单元素包装在form-x类中。这通常有助于他们的表单元素的自定义CSS。遵循BS约定，您缺少外部包装器form-group。最后，因为您的开始标签是不同的长度（即按揭付款），将它们包装在网格容器.col-md-2中可能无法呈现您想要的方式。无论如何，更改列类很容易，因此您可以自行决定。请记住，BS有媒体查询，因此它的显示方式可能因设备和视口宽度而异。

所有这一切，我都有这个应该帮助你的小提琴。

<强> HTML

<div class="container">
  <div class="row">
    <form class="form-inline">
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
        </div>
      </div>
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
        </div>
      </div>
    </form>
  </div>

http://jsfiddle.net/5webN/

Bootstrap并排排列输入

3 个答案: