网格的正确使用方法是什么？

Question

刚开始学习bootstrap。这是我第一次使用网格进行布局。我对网格不了解的地方是我应该放置内容的地方。

我应该这样做吗:

<div class="row">
    <div class="col-md-12">
        <p> My content </p>
    </div>
</div>

或者我应该像这样为我的内容使用父元素

<div class="row">
    <div class="col-md-12">
        <div> or <footer> or <aside> or <content> etc
            <p> My content </p>
        </div> or </footer> or </aside> or </content> etc
    </div>
</div>

如果答案是第二个。是否有任何理由可以将内容直接放入专栏中？还是我误解了一切，应该以完全不同的方式来完成？

什么是 "best practice"？

Answer 1

内容应按照 bootstrap documentation

中所述放在您的专栏中

在您的示例中两者都是正确的，因为网格仅用于布局，您可以在其中放置任何块或内联元素。

Answer 2

最好的方法是这样的：

<div class="container">
 <div class="row">
    <div class="col-md-12">
       <div class="your-widget-name">
         Widget code here…
       <div>
   </div>
</div>

这样，您的小部件就可以跨多个布局使用。为网格使用单独的 div 可以增加标记的数量，但使代码更易于维护。

Answer 3

要遵循的最重要规则 - .container 是父项，其子项是 .row，.col 进入行内，您的内容进入 .col。

例如。你想把图片放在中间，段落放在一边。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <p>Lorem ipsum</p>
    </div>
    <div class="col-xs-4">
      <img src="http://placehold.it/150x150" alt="image"/>
    </div>
    <div class="col-xs-4">
      <p>Lorem ipsum summun</p>
    </div>
  </div>
</div>

网格的正确使用方法是什么？

What is the correct way to use grids?

html

twitter-bootstrap

grid-layout