谷歌地图不会拉伸列的整个宽度

Question

在此处发布之前，我已经搜索了几乎所有可以解决的问题。目前，在我的项目联系页面上，我使用 Bootstrap 4 网格在容器内有 3 行列。第三行设置为 col-12，其中一个 iframe 包含一个不会拉伸列的整个宽度的谷歌地图。我在 iframe 中编辑了 HTML 以使用 100% 的高度和 100% 的宽度，但没有骰子。我做错了什么？

<div class="container containerColor">
        <div class="row">
            <div class="col-12 text-center sectionContent bannerBody">
                <h1>contact</h1>
            </div>
        </div>
    
        <div class="row d-flex justify-content-center sectionContent bannerBody">
            <div class="col-xs-12 col-sm-12 col-md-4 sectionContent bannerBody">
                <div class="card cards">
                    <h3 class="card-header cards-header">Hours of Operation</h3>
                    <div class="card-body">
                        <dl class="row d-flex justify-content-center">
                            <dt class="col-6">Sunday</dt>
                            <dd class="col-6">10am - 5pm</dd>
                            <dt class="col-6">Monday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Tuesday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Wednesday</dt>
                            <dd class="col-6">10am - 5pm</dd>
                            <dt class="col-6">Thursday</dt>
                            <dd class="col-6">10am - 6pm</dd>
                            <dt class="col-6">Friday</dt>
                            <dd class="col-6">---</dd>
                            <dt class="col-6">Saturday</dt>
                            <dd class="col-6">9am - 3pm</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="col-8 col-xs-12 col-sm-12 col-md-8">
                <div class="container" style="overflow-wrap: break-word">
                    <h1>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eum adipisci quos animi earum repudiandae ipsum ut dignissimos vel suscipit dolor dolores vitae sapiente repellendus asperiores, tempora ea minus quisquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio distinctio error magni eaque quidem quaerat deleniti aut beatae. Mollitia maxime voluptatum, in magnam sed fuga autem nihil nulla perferendis saepe.
                    </h1>
                </div>
            </div>
                <div class="row d-flex justify-content-center mt-5 mb-5">
                    <div class="col-12">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539%3A0xe2cd727e83aa610d!2s430%20S%20Rampart%20Blvd%20%23150%2C%20Las%20Vegas%2C%20NV%2089145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
                            style="border: 2px solid; width: 100%; height: 100%;"
                            allowfullscreen=""
                            loading="lazy"
                        ></iframe>
                    </div>
                </div>
            </div>
        </div>
    <!-- <div class="container sectionContent text-center flex-wrap"> -->
        <div class="row sectionContent">
            <div class="col-12 text-center">
                <h1 class="bannerBody">rachel<wbr />@jackofallfades.co</h1>
            </div>
        </div>
    </div>

Answer 1

您可以添加 w-100 类来为任何元素提供 100% 的宽度。

<div class="row d-flex justify-content-center mt-5 mb-5 w-100">
    <div class="col-12">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3220.99444862719!2d-115.2891474483767!3d36.16668971070266!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c8bf86523a6539%3A0xe2cd727e83aa610d!2s430%20S%20Rampart%20Blvd%20%23150%2C%20Las%20Vegas%2C%20NV%2089145!5e0!3m2!1sen!2sus!4v1634184552181!5m2!1sen!2sus"
            style="border: 2px solid; width: 100%; height: 100%;"
            allowfullscreen=""
            loading="lazy"
        ></iframe>
    </div>
</div>