Bootstrap 如何使列扩展到容器引导之外

mftmpeh8 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(138)

我正在使用bootstrap行/列、googleMapiframe和bootstrap中的容器类。
我想要的基本上是这样的：

我需要一个横跨整个页面宽度的行。我需要两个等长的列（col-md-6）。
在第一列中，我希望一些内容和文本遵守页面的“容器”宽度。因此，div中的任何内容都将从Bootstrap开始并遵守容器类。
在第二列中，一个google maps iframe从div的开头开始，溢出到整个行和宽度的后半部分。
这是我目前使用Bootstrap和HTML所拥有的。
这当然不是我们想要的结果，因为容器类使iframeMap不会超过容器宽度。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Content</h1>
        </div>
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.33209119498!2d-121.4429125!3d38.56173395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA!5e0!3m2!1sen!2sus!4v1665949400296!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
    </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74091119/how-to-have-a-column-extend-past-container-bootstrap

1条答案

按热度按时间

vlf7wbxs1#

你不能用基本容器来实现这一点，但是用container-fluid和offset类就可以实现这一点。下面是一个例子：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 offset-md-1 col-lg-4 offset-lg-2 bg-secondary">
            <h1>Content</h1>
        </div>
        <div class="col-md-6">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.33209119498!2d-121.4429125!3d38.56173395!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA!5e0!3m2!1sen!2sus!4v1665949400296!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>
    </div>
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何使列扩展到容器引导之外

1条答案

相关问题

热门标签

最新问答