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类添加到父col-md *。这里我添加了.padding0 并为padding0类编写css

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

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

2 个答案:

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