Bootstrap：行重叠和高度不一致答案

【问题标题】：Bootstrap: rows overlaping & height inconsistencyBootstrap：行重叠和高度不一致
【发布时间】：2017-10-19 01:41:38
【问题描述】：

我正在尝试使用引导程序制作一个简单的 Web 应用程序。但是，我遇到了一些与我希望显示内容的方式相关的问题：行与之前的行重叠，而且我还注意到我的行的高度设置为 0，即使这些行的内容有正确的高度，并以我想要的方式显示。

这是 HTML 代码：

<div class="container">
  <div class="row">Some title</div>
  <div class="row">
    <div class="col-md-6">
      <div class="wrapper">
        <div class="MiddlePreviewBox">

        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="wrapper">
        <div class="MiddlePreviewBox">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="wrapper">
        <div class="MiddlePreviewBox">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="wrapper">
        <div class="MiddlePreviewBox">

        </div>
      </div>
    </div>
  </div>
</div>

还有 CSS（少）

@border-width: 1px;
@aquaClear: rgba(0, 255, 255, 0.4);
@aqua: rgba(0, 255, 255, 1);
@whiteClear: rgba(255, 255, 255, 0.75);
@whiteTransparent: rgba(255, 255, 255, 0);
@orange: rgb(255,165,0);

body {
    background-color: rgb(50, 50, 50) !important;
}

.container {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62), 0 6px 20px 0 rgba(0, 0, 0, 0.619);
}


// Using variables
.MiddlePreviewBox {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 50%; //Ratio 1:0.5
    background-color: green;
    background-size: 200% 100%;
    background-position-x: -200px;
    background-image: url(http://www.imagendigital.com/web/img/global/leon_imagen_digital.jpg);


}

.wrapper {
    position: relative;
    width: 100%; /* <-- just a default, can be anything. */
}

这是代码（Codepen.io）：

https://codepen.io/julianbautista87/pen/WjJWGg

【问题讨论】：

标签： css twitter-bootstrap less

【解决方案1】：

这是因为您已将MiddlePreviewBox 定位到absolute，无需这样做。只需删除 absolute 并将 margin-top:20px; 设置为 .wrapper 类即可。

Codepen

【讨论】：

【解决方案2】：

您的容器与行重叠我建议更改以下代码：

.container {
   /* background-color: white; remove*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62), 0 6px 20px 0 rgba(0, 0, 0, 0.619);
}
#title-row{
  background-color: white;
}

还可以在带有一些标题的单词的行中添加 id #title-row。

【讨论】：

感谢您的回复，但这并不能解决我的问题（更改颜色只会隐藏重叠问题，因为应该显示 4 个框，并且容器的高度没有匹配它的内容的高度）。