Bootstrap - 重叠的列和行答案

【问题标题】：Bootstrap - Overlapping Columns and RowsBootstrap - 重叠的列和行
【发布时间】：2016-06-20 22:51:16
【问题描述】：

我正在创建一个网站并使用 Bootstrap 来简化网站的响应式操作。我遇到的问题是我不知道如何让一列或一行的图像与其他行或列重叠。通常不使用 bootstrap 我会使用 -margin 或 -padding 来允许 div 显示在彼此之上，但是 Bootstrap 不允许我使用这些标签并在我使用它们时覆盖它们。

<div class="row row7">
<div class="col-lg-1"></div>
<div class="col-lg-6"><img src="/images/map.png"></a></div>
<div class="col-lg-3"><img src="/images/map2.png"></div>
<div class="col-lg-2"></div>
</div>

我需要地图图像在第 7 列结束，map2 图像在第 7 列开始

提前致谢，

安迪

【问题讨论】：

你试过嵌套行吗？
还是同样的问题。
你有你想要做什么的例子吗？
抱歉，我试图尽可能清晰，但不实际复制我从设计中构建的网站的图像。我需要图像 map 和 map2 在一行中并排放置。我需要 map1 图像从第 2 列跨越到第 7 列，我需要 map 2 从第 7 列开始跨越到第 10 列。
创建一个演示问题的小提琴或Bootply

标签： html css image twitter-bootstrap

【解决方案1】：

使用.col-push-xx-x 和.col-pull-xx-x 类。

<div class="container">
  <div class="row">
     <div class="col-md-6 col-md-push-1" style="background-color:rgba(255,0,0,0.2)">
        [Image 1]
    </div>
    <div class="col-md-4" style="background-color:rgba(0,255,0,0.2)">
        [Image 2]
    </div>
  </div>
</div>

【讨论】：

非常感谢，我一直在寻找并没有意识到 Bootstrap 的推拉功能。当我与可以解码我的杂谈的人交谈时，使用 Bootstrap 填充和 % 定位元素的最佳方法是什么，或者什么是最佳实践？再次感谢。