网格系统中的Bootstrap白色中断

Question

当我向右侧边栏添加内容时，我的引导面板会出现白色中断。 我试图改变col-mds并添加一个clearfix，但是没有用。

图片：https://i.snag.gy/54SNqw.jpg

代码：

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.custom-header-panel {
  background-color: #004b8e !important;
  border-color: #004b8e !important;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
        This doesn't work. tste
        <br>test
        <br>test
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

有什么想法来解决这个问题吗？

Answer 1

首先你需要添加外部div - container-fluid，之后你需要添加包含row的类panel的div。

出现中断，因为所有类col-*-*（以及container-fluid）的默认左右填充等于 15px 。类row补偿这些填充，其左右边距为 -15px 。

实际上，您只需将row课程添加到<div class="panel">，但这不是非常正确的解决方案。

＆＃13;

＆＃13;

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.custom-header-panel {
  background-color: #004b8e !important;
  border-color: #004b8e !important;
  color: white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
        This doesn't work. tste
        <br>test
        <br>test
      </div>
    </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-8">
  <div class="row">
    <div class="panel">
      <div class="panel-heading custom-header-panel">
        <h3 class="panel-title roboto">Profile info</h3>
      </div>
      <div class="panel-body">
      </div>
    </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;