使用Bootstrap构造HTML的正确方法

Question

我已经使用Bootstrap一段时间了，构建我的HTML元素而不知道我是否以正确的方式做这件事。它有效，但我想知道是否有更好的方法。

让我们以此模板为例：

我首先要做的是尝试将页面分成更小的部分。在这种情况下，我将首先划分左右列，给出左列4和右列8＆＃34;列＆＃34;。我会编写和定位HTML / class属性，如下所示：

...
<div class="row">
  <div class="col-md-4">
     <div id="upperLeftCol" class="col-md-12"> ... </div>
     <div id="lowerLeftCol" class="col-md-12">
          <div id="uniqueId1" class="col-md-12">
              <img src="#" alt="...">
              <div class="col-md-12">
                  some messge
              </div>
          </div
          <div id="uniqueId2" class="col-md-12">
              <img src="#" alt="...">
              <div class="col-md-12">
                  some messge
              </div>
          </div
      </div>
  </div>
  <div class="col-md-8">
      .......
  </div
</div>

嗯，你得到了照片。我尝试将每个子部分划分为一个自己的div并给它col-md-12类属性，因为我注意到它与具有相同类注释的另一个div最佳对齐。

我确定有更正确的方法可以做到这一点。什么是最好的＆＃34;进场？我何时应该创建一个新的＆＃34;行＆＃34;？

Answer 1

我更喜欢使用更多行：

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div id="upperLeftCol" class="col-md-12"> ... </div>

在使用动态单元格时，代码可以更好地了解其他人并避免一些设计错误。