Question

组织Bootstrap网格的方法很少，例如

<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

Answer 1

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

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

Answer 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的完美输出

Answer 3

看看你的布局怎么样？ bootstrap有一些解决方案，你可以选择你需要的！在HTML5中，更好的解决方案是使用<footer>标记而不是<div class="footer">，＆＃39; class =＆＃34; container＆＃34;＆＃39;有固定宽度的衬垫，＆＃39; class =＆＃34;容器流体＆＃34;＆＃39;只有填充，class="row"具有负边距，与正container填充等重叠......

Bootstrap网格的语义标记

3 个答案: