假設 2 列 Bootstrap 布局，其中 Modal 放置在col-sm-9列中，是否可以讓模態具有col-sm-9列的寬度而不是覆寫整個螢屏？
基本上我想要實作的是讓列col-sm-3始終可見
<div class="col-sm-3">
<h1>Headline</h1>
</div>
<div class="col-sm-9">
<p>Something</p>
<button class="btn modal-trigger">Trigger Modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="modal-car" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue to play</button>
</div>
</div>
</div>
</div>
</div>
編輯：我嘗試了@MilanDemoniack 的建議，但沒有奏效。我container是盒裝的，所以它不是容器流體，但模態一直延伸到最后
uj5u.com熱心網友回復：
我不確定你想要做的是有一個布局，你"col-sm-3"會在螢屏的左側和螢屏"col-sm-9"的右側，但如果是，這就是我的建議：
1）您想要的是讓模態與"col-sm-9". "col-sm-9"是模態的父級。所以你需要保持"width: 100%"模式。您必須從引導類中洗掉的是"left: 0"將從左角擴展模態并“覆寫”模態的大小 傳遞左側塊"col-sm-3"。（查看第一張圖片）
2）在"modal-dialog"課堂上，您需要取出"max-width : 500px"設定模態框寬度的那個。現在，您的模態框將與"col-sm-9". （查看第二張圖片）
這是 HTML 代碼：（我必須更改data-bs-toggle="modal" data-bs-target="#exampleModal"按鈕的按鈕才能打開模式）
<div class="col-sm-3">
<h1>Headline</h1>
</div>
<div class="col-sm-9">
<p>Something</p>
<button class="btn modal-trigger" data-bs-toggle="modal" data-bs-target="#exampleModal">Trigger Modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id="modal-car" class="modal-body">
Lorem ipsum dolor sit amet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue to play</button>
</div>
</div>
</div>
</div>
</div>
更新 ：
如果您希望您的模態遵循更多的媒體查詢規則，請將它們設定在父模態和模態上（見下圖）。這樣，它將是容器流體。
不要忘記"width :100%"從模態中取出
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/421175.html
標籤：