小编Mv2*_*v27的帖子

我有一些填充的大问题.在我的问题描述有意义之前,在检查器窗口中有两页要查看 - 并查看移动视图设备部分:

1:这个民主正在按计划运作.

2:这个民主不起作用.

两页之间的区别在于我添加了一行,其中包含三张图片.有3张图片的行基本构建如下:

<div class="row wrapping">
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-8 margin_bottom">
                <!-- Picture 1 -->
            </div>
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12 margin_bottom">
                        <!-- Picture 2 -->
                    </div>    
                </div>
                <div class="row">
                    <div class="col-sm-12 margin_bottom">
                        <!-- Picture 3 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我看到它在内柱上设置了一个填充物col > row > col？如何删除填充？我使用下面的代码删除了行上的填充,并认为这也将计入所有列.

.row.wrapping {
    margin-right: 0;
    margin-left: 0;
  }
    .wrapping > [class^="col-"], .wrapping > [class^=" col-"] {
      padding-right: 0;
      padding-left: 0;
  } …

我今天刚开始学习 CSS 网格，我可以开始看到使用这个很棒的 css 类的意义。但真正让我困惑的一件事是如何在移动设备上重新组织网格。

我在这里做了一个例子。这是在桌面视图上应该如何工作。当屏幕尺寸低于 991px 时。我希望网格看起来像这样：

但是我应该如何使用 CSS 网格来控制它？

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

<div class="wrapper">
  	<div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>