我正在使用引導行/列、谷歌地圖 iframe 和引導程式中的容器類
我想要什么基本上相當于：
我想要一個跨越整個頁面寬度的行。我想要兩列等長（col-md-6）。
在第一列中，我想要一些尊重頁面“容器”寬度的內容和文本。因此，div 中的任何內容都從 Bootstrap 開始并尊重容器類。
在第二列中，谷歌地圖 iframe 從 div 的開頭開始，并溢位整個行和寬度的后半部分。
這就是我目前使用 Bootstrap 和 HTML 所擁有的。
這當然不是想要的結果，因為容器類使 iframe 映射不會超過容器寬度。
<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:0x921f6aaa74197fdb!2sSacramento, CA!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>
uj5u.com熱心網友回復：
您不能使用基本容器來做到這一點。但是使用容器流體和偏移類，您可以實作它。這是一個例子：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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:0x921f6aaa74197fdb!2sSacramento, CA!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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516845.html
標籤：html推特引导引导程序 4