嵌套在另一行中时如何摆脱 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

Answer 2

.row
  .col-md-6 .padding0
    .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 .padding0
    .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

添加一个 css class 到父 col-md*。在这里我添加了 .padding0 并为 padding0 class

写入 css

.padding0{
padding-left:0 !important;
padding-right:0 !important;
}

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

How to get rid of col-md-* padding when nested in another row, without affecting the entire grid?

html

css

twitter-bootstrap-3

haml

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