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>

如果答案是第二个。有没有理由将内容直接放入列中？或者我是否误解了一切，应该以完全相反的方式完成？

什么是＆＃34;最佳实践＆＃34;？

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。

EG。你想把Image放在中间，旁边是段落。

<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>

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

3 个答案: