Question

我试图使用bootstrap创建一个简单的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

Answer 1

这是因为您已将MiddlePreviewBox定位到absolute，因此无需执行此操作。只需删除absolute并将margin-top:20px;设置为.wrapper类。

<强> Codepen

Answer 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，其中包含一些标题。

Bootstrap：行重叠＆amp;身高不一致

2 个答案: