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

【问题标题】：How to get rid of col-md-* padding when nested in another row, without affecting the entire grid?嵌套在另一行中时如何摆脱 col-md-* 填充，而不影响整个网格？
【发布时间】：2015-06-02 10:37:28
【问题描述】：

我必须修改使用 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|___|

鉴于整个页面有更多相似的连续行，并且一些具有跨栏元素，我如何才能摆脱这种填充，而不影响整个脚手架中的填充。

【问题讨论】：

A col 正在自动创建左右填充。添加一个类并删除此填充

标签： html css twitter-bootstrap-3 haml

【解决方案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

【讨论】：

@vtor 请接受答案，激励我们！ :D

【解决方案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

向父 col-md* 添加一个 css 类。在这里我添加了 .padding0 并为 padding0 类编写 css

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

【讨论】：

谢谢你，vaasudev！我尽量避免使用“！important”，我需要在面板之间保留一个填充。