Bootstrap 4中row元素超出父容器问题咨询

我来帮你拆解这个问题～

问题原因 #

Bootstrap 4的.row类默认自带了margin-left: -15px和margin-right: -15px的样式，这是框架的设计初衷：为了抵消所有.col-*列类默认的padding-left: 15px和padding-right: 15px，让列的内容能够完美对齐父容器的边缘。但如果你的.row直接放在自定义的.newWrap容器中，而这个自定义容器没有做对应的样式处理，row的负margin就会直接撑开父容器，导致你看到的溢出问题。

你的代码示例 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 
<div class="newWrap"> 
  <span class="h4">Plán akcí na květen <span class="font-weight-light">(02.05.2018)</span></span> 
  <div class="row newDescription"> 
    <div class="col-4 newImgWrap"> 
      <img src="https://images.pexels.com/photos/956981/milky-way-starry-sky-night-sky-star-956981.jpeg?auto=compress&cs=tinysrgb&h=300&w=300"> 
    </div> 
    <div class="col-8"> 
    </div> 
  </div> 
</div>

解决方案 #

给你三个可行的解决办法，按需选择：

• 方法一：用Bootstrap自带容器类包裹row
  把自定义的.newWrap加上Bootstrap的.container或.container-fluid类，这些容器类自带左右内边距，刚好能抵消row的负margin：

  <div class="newWrap container">
  <!-- 或者 <div class="newWrap container-fluid"> -->
  

• 方法二：给自定义容器添加内边距
  如果不想用Bootstrap的容器类，给.newWrap手动添加左右15px的内边距，抵消row的负margin：

  .newWrap {
    padding-left: 15px;
    padding-right: 15px;
  }
  

• 方法三：移除row的负margin和列的内边距
  给row添加Bootstrap的.no-gutters类，这个类会直接移除row的负margin以及所有列的内边距，避免溢出：

  <div class="row no-gutters newDescription">
  

内容的提问来源于stack exchange，提问作者Oliver Tušla