Question

我正在尝试重新创建Airbnb的搜索页面用户界面（例如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>

我希望map元素遵循Bootstrap的网格系统，但会扩展/出血到并恰好在视口的右边缘。

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

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

Answer 1

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

将最大宽度设置为100％。
将padding设置为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

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

2 个答案:

抵消列