Question

我正在尝试制作一个具有连续4列且宽度不同的布局，但也应该只占据页面的70-80％。但是，一旦我设置了父容器的宽度或在容器中添加了边距，网格行内的内容就会开始与其他列重叠，该如何防止呢？

<style>

    .instructions-wrapper {
        text-align: center;
        margin: 0 5%; /*if I delete this row, it all works as expected. I tried width: 80%, same things happens.*/
    }

    .one {
        background-color: red;
    }

    .two {
        background-color: yellow;
    }
    
    .three {
        background-color: blue;
    }

    .four {
        background-color: purple;
    }


</style>

<div class="instructions-wrapper">
    <h1>text</h1>
    <div class="container">
        <div class="row">
            <div class="col-lg-1 one">
                2019
            </div> 
            <div class="col-lg-2 two">
                <img src="https://via.placeholder.com/100"> 
            </div>
            <div class="col-lg-7 three">
                text
            </div>
            <div class="col-lg-2 four">
                text
            </div>
        </div>
    </div>
</div>

Answer 1

页边空白使容器变小，并且列对于内容而言太小，因此必须重叠。

例如，您为网格的两部分提供“两”列，并且图像为100px。

如果您的容器为1200像素。那么2个部分是200像素，包括30像素的填充。
如果容器的宽度为780px，则2个部分的宽度为130px-这是图片和填充的全部宽度
因此，如果您的容器小于780px，则此网格单元将开始重叠。

这是您使用width:80%编写的代码，当您整页查看它时，它仍然有效。因此，您的容器太小了。

.instructions-wrapper {
  text-align: center;
  width:80%;
}

.one {
  background-color: red;
}

.two {
  background-color: yellow;
}

.three {
  background-color: blue;
}

.four {
  background-color: purple;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="instructions-wrapper">
  <h1>text</h1>
  <div class="container">
    <div class="row">
      <div class="col-lg-1 one">
        2019
      </div>
      <div class="col-lg-2 two">
        <img src="https://via.placeholder.com/100">
      </div>
      <div class="col-lg-7 three">
        text
      </div>
      <div class="col-lg-2 four">
        text
      </div>
    </div>
  </div>
</div>

如何为网格容器设置页面的特定宽度？

1 个答案: