如何将元素放在两个引导容器上并使其响应

Question

我正在寻找将div元素放在两个twitter bootstrap容器上的最佳方法。调整窗口大小时会出现问题。

我正在使用position：absolute;但我确定有更好的方法。

提前致谢。

Answer 1

我不确定有更好的方法。

我就是这样做的。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col1"></div>
  </div>
  <div class="box">Hello</div>
  <div class="row">
    <div class="col-xs-12 col2"></div>
  </div>
</div>

和css

.col1 {
  background-color: blue; 
    height: 50vh;}
.col2 {
  background-color: green; 
  height: 50vh;
}
.box {
  background-color: red;
  height: 50%;
  width: 15%;
  top: 25%;
  right: 20%;
  padding: 20px;
  position: absolute;
  z-index:10;
}

Bootply：http://www.bootply.com/od0peVvEXc

您可能希望使用媒体查询在不同尺寸的屏幕上保持尺寸更加一致。