twitter-bootstrap Bootstrap 并排对齐输入

Bootstrap align inputs side by side

提问by Kode

I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:

我正在尝试使用引导程序并排对齐两个输入。如下对常规 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>

But this always pushes to the second input below the first.

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

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

Any clues?

有什么线索吗？

回答by 4dgaurav

As in given HTML there is no <form>element.

在给定的 HTML 中，没有<form>元素。

here is the Demousing .controls-rowand .control-group

这是 使用和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>

回答by jasonwarford

You should use the "form-inline" Bootstrap class to achieve this:

您应该使用“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>

Take a look at it HERE

看一看这里

回答by dward

I think you've asked a sort of loaded question, but I'll do my best to help.

我想你问了一个很重要的问题，但我会尽力提供帮助。

After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-xclass. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.

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

All that said, I've got this fiddle that should help you.

综上所述，我有这个应该可以帮助你的小提琴。

HTML

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/

http://jsfiddle.net/5webN/