Bootstrap 3 - 将区域与 .container 内的列对齐，大小与视口边缘对齐

Question

有一个设计要求，我这辈子都做不到。考虑这张显示具有 12 列布局的引导网格的图像：

三个黑色矩形代表：

1. 一列填充
2. 主要内容区
3. 互动地图

3段是问题所在；它需要与.container 内的网格系统完美对齐，并且还需要一直到屏幕边缘不溢出。由于1 + 2 部分加起来不超过 6 列，因此我很难调整部分 3 的大小。

我还没有想出任何可行的解决方案——最接近（仍然很远）是make use of pseudo-elements on the grid system——唯一的问题是不可能将地图放在伪元素中。

请注意，我目前已经有一个 JavaScipt 解决方案，我正在寻找一个仅 CSS/HTML 的解决方案来减少页面加载时的闪烁。

---

根据要求，这里有一些图片，希望能让要求更清楚。

之前 - 地图和视口边缘之间存在间隙：

之后 - 地图与固定宽度的引导网格和视口边缘对齐：

---

一些伪代码

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-3 col-lg-offset-1">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
</div>

Answer 1

希望this pen 会有所帮助。

我在地图列中添加了负右边距以补偿可变的容器间隙。计算方式如下：calc((100vw - @container)/2*-1)（窗口宽度和容器宽度之差的一半）用于每个引导断点。

不幸的是100vw 包含滚动条宽度，因此如果页面内容高于窗口高度，则会出现烦人的水平滚动条。我已经用overflow-x:hidden; div 包裹了容器，所以它只是在地图右侧隐藏了额外的~20px。我想在你的特殊情况下没关系，因为标准的谷歌地图在它的右侧和有用的控件之间有足够的空间。

Answer 2

解决此问题的另一种方法是使用 CSS 网格布局。为此，您可以更改页面部分的标记：去掉 Bootstrap 的 .container 包装器并用您自己的网格容器替换 .row 元素，如下面的 HTML：

<div class="section left-content side-map">
  <div class="grid-row">
    <div class="content col">
      Content - remain unchanged
    </div>
    <div class="map-col">
      <!-- the map goes here -->
    </div>
  </div>
</div>

和 CSS：

@media (min-width: 768px) {
  .grid-row {
    display: grid;
    /* create 14 columns: 12 build up the actual grid,
       two more columns emulate left/right "margins" */
    grid-template-columns: 1fr repeat(12, 60px) 1fr;
  }

   .content {
    grid-column: 3 / span 7; /* span 7 columns starting from #2 (technically, the 3rd) */
  }

  .map-col {
    grid-column: 10 / span 5; /* span 5 last columns, including the right "margin" */
  }

}

@media (min-width: 992px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 80px) 1fr;
  }
}

@media (min-width: 1200px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 95px) 1fr;
  }
}

此解决方案的关键部分是吸收主要 12 个网格列之外的额外水平空间的“边距”也是网格列（具有自动宽度），您可以让您的块像任何其他块一样跨越这些额外的列，因此浏览器会自动为您计算所有大小。

您可以在 Ilya Myasin 的 CodePen 的这个分支中看到这种方法的实际效果：https://codepen.io/SelenIT/pen/mjoomN?editors=1100。我还在 CSS Grid 属性中添加了 -ms-prefixed 等效项，以使演示也可以在 IE10+ 中运行。

Answer 3

在引导程序中container 的宽度在px....所以给.container 一个宽度在% or vw

    .container{
      width: 80vw;
    }
or
    .container{
      width: 80%;
    }

Answer 4

尝试一下..您必须在拆分之前将网格修复为 12 部分 col-sm-12.. 并删除 col-lg-offset-1 并删除 position:padding;

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-12">
            <div class="col-sm-8 col-lg-7">
                Content - remain unchanged
            </div>
            <div class="col-sm-4 col-lg-3">
                <div id="contact-map">
                    Map here - need to extend to viewport edge
                </div>
            </div>
        </div>
    </div>
</div>

Answer 5

只需添加 padding-right:0;在地图一侧。 不要使用 col-lg-offset-1 将列从 3 增加到 4。这将解决问题

<div class="section left-content side-map">
    <div class="container" style="border:1px solid #ccc;">
        <div class="row">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-4 text-right" style="padding-right:0;">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
    </div>
</div>