如何溢出/扩展/渗出一个引导列到视口的边缘

Question

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

这就是我需要的：https：//i.ibb.co/zrpwyhc/artboard.jpg

堆栈溢出上有一些相关的问题和答案。但是，它们似乎不遵循网格系统，需要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>

我希望地图元素能够遵循引导程序的网格系统，但会扩展/流血至视图的右边缘。

最重要的是该解决方案应遵循引导网格系统。最好也是仅CSS解决方案。

有人可以将我推向正确的方向吗？非常感谢帮助。

Answer 1

覆盖bootdtrap的默认最大宽度和.container class

的填充规格

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

设置边缘右：0px in .Row class

在.col-4类包装地图元素

的.col-4类中将填充右右右翼设置为0

在.suggestions类(最好以百分比值为单位(中给出一个左左值，以维护左空间。

Answer 2

首先需要.container-fluid而不是.container。这样做，整个视图港都被占据了。然后，使用.offset-*获取左侧间隙。

抵消列

您可以通过两种方式偏移网格列：我们的响应式.offset-网格 课程和我们的利润公用事业。网格课程大小以匹配 列虽然利润率对于快速布局更有用 偏移的宽度是可变的。-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