如何将 Bootstrap 列溢出/扩展/流血到视口的边缘？

Question

我正在尝试重新创建 Airbnb 的搜索页面 UI（例如 https://www.airbnb.nl/s/Paris/homes）。不幸的是，我在将地图部分扩展到视口的最右边时遇到了一些困难。

这就是我需要的：https://i.ibb.co/zrpwYhC/Artboard.jpg

Stack Overflow 上有一些相关的问题和答案。 然而，它们似乎不遵循网格系统，需要 Javascript 或将（非常高的）宽度设置为展开的元素。

我自己尝试过的绝对是将地图定位在右侧（网格系统之外）并赋予其特定宽度。这可行，但并不可取。

我也检查了 Airbnb 的源代码，但他们似乎有一个自定义网格，由于我的知识有限，我不太了解。

我创建了一个自定义的基础 CSS 和 HTML：https://jsfiddle.net/Lwhgpzrt/

.suggestions {
    background-color: #F2F2F2;
    border: 1px solid #000;
}

.result-wrapper {
    padding-top: 45px;
    padding-bottom: 45px;
    background-color: lightskyblue;
    border: 1px solid #000;
}

.result {
    background-color: white;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 30px;
    border: 1px solid #000;
}

.map-wrapper {
    height: 100%;
    background-color: lawngreen;
    border: 1px solid #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="suggestions">
    <div class="container">
        <div class="row">
            <div class="col-8">
                <div class="result-wrapper">
                    <div class="row">
                        <div class="col-12"><div class="result">Result here</div></div>
                        <div class="col-12"><div class="result">Result here</div></div>
                        <div class="col-12"><div class="result">Result here</div></div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="map-wrapper">Google Map here</div>
            </div>
        </div>
    </div>
</section>

我希望地图元素遵循 Bootstrap 的网格系统，但会扩展/溢出并恰好在视口的右边缘结束。

最重要的是解决方案应该遵循 Bootstrap 网格系统。最好它也是一个纯 CSS 的解决方案。

谁能把我推向正确的方向？非常感谢您的帮助。

Answer 1

覆盖 bootdtrap 的默认最大宽度和 .container 类的填充规范

1. 将最大宽度设置为 100%。
2. 将填充设置为 0；

在.row类中设置margin-right:0px

在包裹地图元素的 .col-4 类中将 padding-right 设置为 0

如果需要，还可以在 .suggestions 类中提供一个 margin-left 值（最好是百分比值）以保持一个左边的空间。

Answer 2

您需要先.container-fluid 而不是.container。这样做会占用整个视口。然后，使用.offset-* 获取左侧间隙。

偏移列

您可以通过两种方式偏移网格列：我们的响应式 .offset-grid 类和我们的保证金效用。网格类的大小匹配 列，而边距对于快速布局更有用，其中 偏移的宽度是可变的。 - getBootstrap.com

在地图列上使用.pr-0 删除其填充权。

.suggestions {
  background-color: #F2F2F2;
  border: 1px solid #000;
}

.result-wrapper {
  padding-top: 45px;
  padding-bottom: 45px;
  background-color: lightskyblue;
  border: 1px solid #000;
}

.result {
  background-color: white;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 30px;
  border: 1px solid #000;
}

.map-wrapper {
  height: 100%;
  background-color: lawngreen;
  border: 1px solid #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="suggestions">
  <div class="container-fluid">
    <div class="row">
      <div class="offset-2 col">
        <div class="result-wrapper">
          <div class="row">
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
            <div class="col-12">
              <div class="result">Result here</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-4 pr-0">
        <div class="map-wrapper">Google Map here</div>
      </div>
    </div>
  </div>
</section>

我用过.offset-2。如果差距大于/小于您希望的差距，请更改它。使用.col 而不是.col-8，因为它更易于维护。否则，计算您需要使用哪个.col-*。在这种情况下，你需要.col-6，因为.col-6 = .col-12 - (.col-4 + .col-2)

https://codepen.io/anon/pen/rEqQKm