html - 嵌套在另一行中时如何摆脱 col-md-* 填充，而不影响整个网格？

Question

我必须修改使用 HAML+SASS+BOOTSTRAP 编写的页面。 HAML 文件如下所示:

.row
  .col-md-6
    .panel.panel-default.panel-dashboard
      .row
        .col-md-6
          .panel-heading
            Title 1
          .panel-body
            Content 1
          .panel-bottom
            Link 1
        .col-md-6
          .panel-heading
            Title 2
          .panel-body
            Content 2
          .panel-bottom
            Link 2
  .col-md-6
    .panel.panel-default.panel-dashboard
      .row
        .col-md-6
          .panel-heading
            Title 3
          .panel-body
            Content 3
          .panel_bottom
            Link 3
        .col-md-6
          .panel-heading
            Title 4
          .panel-body
            Content 4
          .panel-bottom
            Link 4

输出必须是一行有两个面板，每个面板有两列。

     _________   _________
    |____|____| |____|____|
    |____|____| |____|____|
    |____|____| |____|____|

不幸的是，我在面板内的列之间得到了填充，下面用 |x| 标记:

     _________   _________
    |___|x|___| |___|x|___|
    |___|x|___| |___|x|___|
    |___|x|___| |___|x|___|

如果整个页面有更多相似的连续行，并且一些带有 colspanned 元素，我怎样才能去掉这个填充，而不影响整个脚手架中的填充。

Answer 1

给出这样的东西:

  .col-md-6
    .panel.panel-default.panel-dashboard
      .row.no-margin-cols
        .col-md-6
          .panel-heading
            Title 3
          .panel-body
            Content 3
          .panel_bottom
            Link 3
        .col-md-6
          .panel-heading
            Title 4
          .panel-body
            Content 4
          .panel-bottom
            Link 4

和 SCSS 作为:

.no-margin-cols {
  *[class*="col-md-"] {
    margin: 0;
    padding: 0;
  }
}

这对你有用吗？

笔:http://codepen.io/anon/pen/WvpQeN