Question

我正在使用Bootstrap 3并尝试在同一表单网格上使用带有非分组输入的输入组。它适用于IE和FF，但在Chrome中，网格对齐丢失。是否有Chrome错误或我做错了什么？

<form>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input1">Input1</label>
    <input type="text" class="form-control" id="input1" name="input1">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input2">Input2</label>
    <div class="input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" class="form-control" id="input2" name="input2">
    </div>
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input3">Input3</label>
    <input type="text" class="form-control" id="input3" name="input3">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input4">Input4</label>
    <input type="text" class="form-control" id="input4" name="input4">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input5">Input5</label>
    <div class="input-group">
    <span class="input-group-addon">Go!</span>
    <input type="text" class="form-control" id="input5" name="input5">
    </div>
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input6">Input6</label>
    <input type="text" class="form-control" id="input6" name="input6">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input7">Input7</label>
    <input type="text" class="form-control" id="input7" name="input7">
  </div></div>

  <div class="form-group"><div class="col-xs-4">
    <label class="control-label" for="input8">Input8</label>
    <input type="text" class="form-control" id="input8" name="input8">
  </div></div>

</form>

JSFiddle sample

Image sample

Answer 1

我不知道是什么导致输入加载项变大，但这是带有浮点数的经典height problem。你需要一个clearfix。

在CSS中，像这样：

<form>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input1">Input1</label>
        <input type="text" class="form-control" id="input1" name="input1">
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input2">Input2</label>
        <div class="input-group">
            <input type="text" class="form-control" id="input2" name="input2">
            <span class="input-group-addon big"><strong>Go!</strong></span>
        </div>
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input3">Input3</label>
        <input type="text" class="form-control" id="input3" name="input3">
    </div>
    <div class="clearfix"></div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input4">Input4</label>
        <input type="text" class="form-control" id="input4" name="input4">
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input5">Input5</label>
        <div class="input-group">
            <span class="input-group-addon">Go!</span>
            <input type="text" class="form-control" id="input5" name="input5">
        </div>
    </div>
    <div class="form-group col-xs-4">
        <label class="control-label" for="input6">Input6</label>
        <input type="text" class="form-control" id="input6" name="input6">
    </div>
    <div class="clearfix"></div>
    <div class="form-group col-xs-4">

        <label class="control-label" for="input7">Input7</label>
        <input type="text" class="form-control" id="input7" name="input7">

    </div>
    <div class="form-group col-xs-4">

        <label class="control-label" for="input8">Input8</label>
        <input type="text" class="form-control" id="input8" name="input8">

    </div>
</form>

或，在HTML中如下：

{{1}}

Demo

Bootstrap输入组网格对齐无法在Chrome上运行

1 个答案: