如何让Bootstrap列超出container容器实现特定布局

要实现你需要的布局，核心是打破container对右侧地图列的宽度限制，同时保留左侧内容的容器约束，具体代码调整如下：

<div class="row w-100 m-0">
    <!-- 左侧内容列：嵌套container来限制宽度 -->
    <div class="col-md-6 d-flex align-items-start">
        <div class="container">
            <h1>Content</h1>
            <!-- 这里放置你的其他内容 -->
        </div>
    </div>
    <!-- 右侧地图列：占满当前列的全部宽度，超出原container范围 -->
    <div class="col-md-6 p-0">
        <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>

关键调整说明 #

• 移除最外层的container，改用row w-100 m-0让行占满整个页面宽度，消除默认边距
• 左侧列内嵌套container，确保内容遵循原有的容器宽度限制
• 右侧列添加p-0清除默认内边距，同时将iframe的width设为100%，让地图占满整个列的宽度，自然超出原container的范围
• 给左侧列添加d-flex align-items-start，保证左侧内容和地图列顶部对齐（可选，可根据需求调整）

内容的提问来源于stack exchange，提问作者user19686218