Question

我正在使用Boostrap 3.在具有“row”类的DIV中的输入控件是否与父对象左对齐是正常的吗？它在左侧移动。我认为这可能是一个错误？

有没有办法让它在没有调整CSS的情况下正确对齐（意味着通过仅限Bootsrap的CSS类）。

请在此处找到问题的演示： http://jsfiddle.net/7vRQr/2/

<div class="col-xs-11">
<div class="row">
    <div class="col-xs-offset-1 col-xs-10">
        <h2 class="main-info-title">Following input should be aligned</h2>
        <div class="row">
            <input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
            <label class="col-xs-12">But I am aligned!</label>
        </div>
    </div>
</div>
<span class="col-xs-12">So texts are aligned, I would have expected the input control to be aligned instead of the text inside the input</span>

Answer 1

试试这个：

<style>
.form-horizontal .control-label {
    text-align: left;
  }
</style>

<div class="container">
    <div class="row">
        <div class="col-xs-10">
            <h2>Following input should be aligned</h2>
            <div class="row">

      <form class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-12">
            <input type="text" class="form-control" placeholder="textbox">
          </div>
        </div>
      </form>

            </div>
        </div>
    </div>
</div>

Answer 2

可能是唯一一个面临这个问题的人......

好吧，现在我将每个表单控件（input，textarea，select）用col-xs-12包装在div中，然后就可以了。

所以在我的问题中，取而代之的是：

<input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>

由此（用col-xs-12封装div内部）：

<div class="col-xs-12">
    <input type="text" class="col-xs-12" placeholder="But it is not aligned on the left"/>
</div>

修复缩进问题。请在此处找到完整更新的示例： http://jsfiddle.net/7vRQr/5

非常欢迎任何人提供有关是否是一个bug（似乎是一个）或任何其他解决方法的信息。因为此解决方案确实添加了许多额外的HTML标记。

Bootstrap 3：嵌套“row”div类中输入控件的对齐问题

2 个答案: