css - 我的 Bootstrap 宽度的列号和结构是否有意义？

Question

刚开始学习 Bootstrap，例如设计了这样的表单，我想知道这些列号是否相互对应有意义？

<form class="form-horizontal">

  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Website Active
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <label>Display this message when the website is not active</label>
          <textarea class="form-control" rows="3" id="comment"></textarea>
        </div>
      </div>
    </div>
  </div>

</form>

Answer 1

See here我在评论中解释的不同之处:

在您的情况下，更合适的结构可能是:

            <div class="container">
                <div class="row">
                    <form class="form-horizontal">
                      <div class="col-sm-6">
                        <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox"> Website Active
                                    </label>
                                </div>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                                <label>Display this message when the website is not active</label>
                                <textarea class="form-control" rows="3" id="comment"></textarea>
                        </div>
                      </div>
                    </form>
                </div>
             </div>

并且您必须在 .row 周围添加一个 .container 或 .container-fluid 类

您可以在单个 .container 类中拥有任意多的 .row。

See your code on a bootply fiddle