Question

我刚刚开始玩Twitter Bootstrap，我试图让一个图像连续重叠下面的内容。我怎么能做到这一点？我尝试将下面的内容设为负边距，但这似乎不适用于Chrome开发工具。这是我目前拥有的link，但总结一下：

<div class="container" role="main">
  <div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/252x136" alt="...">
      </a>
    </div>
    <div class="col-md-8">
    </div>
  </div>

  <div class="jumbotron">  
  </div>
</div>

正如你所看到的那样<img>推动了整个jumbotron。我希望它重叠，直到屏幕尺寸崩溃（响应），然后在这种情况下图像不再重叠。

更新

我最终将@JoshC和@Adrian的解决方案结合起来，以实现两者的最佳效果：

@media (min-width: 992px) {
  #overlap {
    height: 70px;
  }
}

Answer 1

您绝对可以放置.col-md-3.img元素，然后将.col-md-8.nav浮动到右侧。我在元素中添加了一些类，然后将样式放在媒体查询中，以确保这不会与任何移动/平板电脑样式冲突。它似乎适用于所有屏幕尺寸。

UPDATED EXAMPLE HERE - FULL SCREEN EXAMPLE

@media (min-width: 992px) {
  .col-md-3.img {
      position: absolute;
      text-align: center;
  }
  .col-md-3.img .thumbnail {
      display:inline-block;
  }
  .col-md-8.nav {
      float: right;
  }
}

添加text-align:center以.thumbnail元素居中，现在也inline-block来修复绝对定位导致的与背景相关的问题。

Answer 2

您可以通过向行添加高度来实现此目的。在下面的演示中，我在行中添加了一个id =“overlap”。

DEMO

<强> CSS

#overlap{
  height:90px;
}

使用Bootstrap使元素与其下方的内容重叠

2 个答案:

DEMO