将具有不同宽度的两个输入组彼此相邻对齐答案

【问题标题】：Align two input groups with different widths next to each other将具有不同宽度的两个输入组彼此相邻对齐
【发布时间】：2014-04-10 02:15:04
【问题描述】：

我想对齐 2 个输入组，一个具有跨度 8，另一个具有 4 个并排。我使用了内联表单，但它没有达到预期的宽度。

<div class="form-inline">
    <div class="form-group">
        <!-- <div class="input-group"> -->
          <input type="text" class="form-control col-sm-8" placeholder="Username">
        <!-- </div> -->
    </div>
    <div class="form-group">
        <!-- <div class="input-group"> -->
          <input type="text" class="form-control col-sm-4" placeholder="Ref No.">
    </div>
</div>

【问题讨论】：

标签： html css forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试下面的css

.form-group{
        float:left;
    }

【讨论】：

【解决方案2】：

在玩了之后我找到了这个解决方案：

HTML

<div class="row form-input">
    <div class="col-sm-8">
        <input type="text" class="form-control" placeholder="Username">
    </div>
    <div class="col-sm-4">
        <input type="text" class="form-control" placeholder="ref no.">
    </div>
</div>
<div class="row form-input">
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Monthly Rent">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Deposit">
    </div>
</div>

CSS

.form-input, .form-input input{
    margin-top: 10px;
}

【讨论】：