html - 在选项卡 Pane 中创建行和列的最佳方法

Question

我在创建放置在选项卡 Pane 中的表单时遇到了问题。看来我的标签和输入当标签太长或窗口变小时，元素会相互跨越边界

我的代码可以在这里看到。请注意，当窗口大小改变时，标签和输入不会保持对齐。似乎在选项卡 Pane 内创建行和列与在该类外部创建它们时的工作方式不同。

http://www.bootply.com/I3Iwdr4UVj

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

还有其他方法可以在我的选项卡 Pane 中很好地创建表单吗？ ..

Answer 1

首先，尝试给一个更宽的类名，.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 的总和。