Bootstrap - 将横幅放在主容器外。答案

【问题标题】：Bootstrap - Place banner outside main container.Bootstrap - 将横幅放在主容器外。
【发布时间】：2017-08-23 09:27:07
【问题描述】：

我已经在一个网站上工作了几个月，现在遇到一个问题，客户希望在主容器“外部”投放广告，而我使用 Bootstrap 标准网格。

由于页面居中且响应迅速，我无法让广告位于左侧，因为我已经使用了 16 列。

你对我如何成功有什么想法吗？

请看图片 here

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

如果你能提供一些代码就太好了。但是，一种将元素相对于当前位置移动的方法是使用 CSS transform: translate();。如果您的横幅位于容器的右侧，并且您想将其推到容器外，请将transform: translateX(100%); 应用于横幅元素，这会将其向右移动横幅相对宽度的 100%到现在的位置。这是一个演示http://codepen.io/mcoker/pen/jyPGrM

【讨论】：

百万感谢米歇尔，transform: translateX(100%);对我来说是新的。结果很完美。现在我的头上留了一点头发，非常感谢。祝你有美好的一天。

【解决方案2】：

我设法只为大屏幕解决了这个问题。

我将绝对位置与 col 类一起用于图像响应，我将它隐藏在较小的设备上，因为它们不起作用。

这是我的代码

<div class="col-md-1 hidden-xs hidden-sm hidden-md" id="side-bar">
    <p>Our Partners</p>
    <img src="img/image.jpg" class="img img-responsive" />
    <img src="img/image.jpg" class="img img-responsive" />
</div>

【讨论】：