Boostrap 3：嵌套"row" div类中输入控件的对齐问题

Question

我正在使用boostrap3。它在左边移动。我认为这可能是一个错误？

是否有一种方法可以使其正确对齐而无需调整CSS（含义仅通过Bootsrap-finly 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

可能是唯一面对此问题的人...

好吧，所以现在我用Col-XS-12包装DIV内的每个形式控件（输入，TextArea，select），然后它可以正常工作。

所以在我的问题中，替换了这个：

<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

非常欢迎任何有关它是否是错误（似乎是一个）还是任何其他方法的方法。因为此解决方案确实添加了很多额外的HTML标记。