在选项卡窗格中创建行和列的最佳方法

Question

我无法创建放置在标签窗格中的表单。看来我的标签和输入 当标签变长或窗口变小时，元素会彼此交叉。

我的代码可以在这里看到..请注意，当窗口大小改变时，标签和输入不会保持对齐。似乎在tab-pane中创建行和列的方式与在该类之外创建它们的方式不同。

http://www.bootply.com/I3Iwdr4UVj

好像输入元素不知道标签的边界..

还有其他方法可以在我的标签窗格中很好地创建表单吗？ ..

Answer 1

首先，尝试给出宽度更宽的className，.col-sm-2对于标签来说太窄了：

<div class="form-group">
          <label class="control-label col-sm-5" for="pwd">Password:</label>
          <div class="col-sm-7">
              <input type="password" placeholder="Enter password" id="pwd" class="form-control">
          </div>
</div>

我建议你在使用Bootstrap类时总是尝试得到12的总和。