Question

我想对齐2个输入组，其中一个输入组为span 8＆amp;另外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>

Answer 1

尝试以下css

.form-group{
        float:left;
    }

Answer 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;
}

将两个宽度不同的输入组对齐

2 个答案: