Question

我正在使用引导程序并尝试正确构建我的引导类，但是当涉及到标题时，我很困惑该怎么做。和＆＃39;主要＆＃39; html5元素，以及其他原生html元素。我应该在哪里使用与这些元素相关的行？我应该把行类放在它们上面吗？嵌套在里面？或者这些元素是否都有一个行标记作为父元素？或者没有正确或错误的方法来做到这一点？我觉得像bootstrap有点像：

container(s)
  row(s)
    col(s)
      row(s)
         col(s)
            ...etc

但内置的html元素似乎有点像两种不同的范例，但我不知道我作为开发人员的期望是什么，以及如何处理它。当我在网上看时，我发现每个人都在随意做各种事情，并且无法找到任何关于如何在语义html5命名范例内正确构建bootstrap类范例的具体指导原则。

我试着查看文档并且令人惊讶地没有发现任何内容，我发现没有人在网上讨论这个问题。在这方面是否有任何合乎逻辑的规则或者它是随机的？

Answer 1

该元素用于包含您网站的标题。您可以使用此元素，然后使用元素内部的引导行，容器等。例如，

<header>
    <h1>Title of my site here</h1>
</header>

或

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
               My Header Content
            </div>
        </div>
    </div>
</header>

您还可以参考：http://html5doctor.com/the-header-element/

真的没有错误的方法。它只是一个偏好。

Answer 2

某些Bootstrap网格系统规则：


行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充

使用行创建水平的列组

内容应放在列中，只有列可能是行的直接子项

.row和.col-sm-4等预定义类可用于快速制作网格布局

列通过填充创建装订线（列内容之间的间隙）。该填充通过
在第一列和最后一列的行中偏移   .rows
的负利润率
通过指定要跨越的12个可用列的数量来创建网格列。例如，三个相等的列将使用
  三.col-sm-4

此处包含完整信息：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

这里有一个片段示例来说明：

＆＃13;

.show-grid [class^="col-"]{
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #AAA;
  background-color: #EEE;
  background-color: rgba(200, 200, 200, 0.3);
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row show-grid">
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
  <div class="col-xs-1">.col-1</div>
</div>
<div class="row show-grid">
  <div class="col-xs-8">.col-8</div>
  <div class="col-xs-4">.col-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-4">.col-4</div>
  <div class="col-xs-4">.col-4</div>
  <div class="col-xs-4">.col-4</div>
</div>
<div class="row show-grid">
  <div class="col-xs-6">
    
<div class="row show-grid">
  <div class="col-xs-8">.col-8</div>
  <div class="col-xs-4">.col-4</div>
</div>
  </div>
  <div class="col-xs-6">.col-6</div>
</div>

＆＃13;

正如Joe所说，＃34;确实没有错误的做法。这只是一种偏好。＆＃34;但我建议你将row与其他内容分开：

//no
<div class="something row">
    ...
</div>

//yes
<div class="something">
    <div class="row">
        ...
     </div>
</div>

因为row有margin: 0 -15px所以如果您想将margin设置为something，则会覆盖row页边距。

我应该使用'＆＃39; row＆＃39;作为父母/孩子的课程或在＆＃39;标题/主要＆＃39;元素？

2 个答案: