使用 Bootstrap Grid 进行语义标记答案

【问题标题】：Semantic markup with Bootstrap Grid使用 Bootstrap Grid 进行语义标记
【发布时间】：2015-12-29 09:12:58
【问题描述】：

Bootstrap Grid 的组织方式很少，例如

<div id='footer'>
   <div class='row'>
      <div class='col-md-6 footer-left'>

或

   <div id='footer' class='row'>
      <div class='col-md-6 footer-left'>

或

<div id='footer'>
   <div class='row'>
      <div class='col-md-6'>
          <div id='footer-left'>

哪个更容易维护，假设您将 CSS 位置（边距、填充等）添加到 footer 和 footer-left

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css twitter-bootstrap css-position semantic-markup

【解决方案1】：

我知道一些 Bootstrap 类，例如容器、行和 col-* 已经应用了一些预定义的填充/边距，这有助于将各种元素展开并在响应式视图中折叠它们等等。

由于 ID 的 CSS 优先于类的 CSS，如果我没记错的话，那么执行类似于第二个选项的操作可能会导致一些奇怪的行为。一般来说，我会选择第三个选项，但最终归结为偏好，如果你觉得你可以解决其他选项可能引入的任何怪癖。

【讨论】：

【解决方案2】：

<div id='footer'>
   <div class='row'>
      <div class='col-md-6'>
          <div id='footer-left'>

以上代码是所需输出的最佳层次结构。如果我们关注container -> row -> col-md-* -> user-defines-class，那么它将使div 完全响应和纯引导相关代码。此层次结构保持所有divs 与margin, padding and center auto 相关的完美输出

【讨论】：

【解决方案3】：

您的布局看起来如何？ bootstrap 为您提供了一些解决方案，您可以选择所需的！在 HTML5 中更好的解决方案是使用 <footer> 标签而不是 <div class="footer">，'class="container"' 具有固定宽度和填充，'class="container-fluid"' 只有填充，class="row" 具有与正重叠的负边距container 填充等...

【讨论】：