我目前在制作版面時遇到了麻煩。在下面的圖片中,我想讓右邊的內容欄(標題、標題......)的大小與左邊的圖片高度相適應。我怎樣才能做到這一點呢?
我使用的是Bootstrap v5.1.1
。當前影像:
。< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"/span>>
<div class="container">
<div class=" row">
<div class="col-md-4"/span>>
<div class="col-md-4 black h-100"/span>>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336. jpg" alt="" style="width:300px;">
</div>/span>
</div>/span>
<div class="col-8">
<h1>Title </h1>
<h6>/span>內容</h6>
<p>Date:june 23 2021</p>
毋庸置疑的是,這是對 "一帶一路 "倡議的回應。我想說的是,如果你是一個人,那么你就應該有一個人的尊嚴,而不是一個女人的尊嚴。勇氣。
<br>閱讀全文
</div>閱讀全文
</div>/span>
< script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span> crossorigin="anonymous"/span>> </script>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
- 使用Bootstrap的flex grid(這是默認的),而不是設定列的大小。
- 在你的圖片列上使用
col-auto類,使其折疊到圖片的寬度。 - 不要在你的網格或你的內容上設定行內尺寸。行內樣式使開發和維護更加困難。如果你愿意的話,為你的圖片使用一個類,并使用一個語意名稱,這樣你就可以在重新設計時改變尺寸值,而不會出現名稱錯誤。
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"/span>>
<style>>
.size-medium {
width: 200px;
}
</style>>
<div class="container">/span>
<div class=" row">
<div class="col col-auto"/span>>
<div class="col-md-4 black h-100"/span>>
<img class="size-medium" src="https://via. placeholder.com/300" alt=">
</div>/span>
</div>/span>
<div class="col">
<h1>Title </h1>
<h6>/span>內容</h6>
<p>Date:june 23 2021</p>
毋庸置疑的是,這是對 "一帶一路 "倡議的回應。我想說的是,如果你是一個人,那么你就應該有一個人的尊嚴,你就應該有一個人的尊嚴。勇氣。
<br>閱讀全文
</div>閱讀全文
</div>/span>
</div>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
你把類col-md-4放到了錯誤的標簽中
<div class="row">
<img class="col-md-4 p-0" src= alt=">
<div class="col-8">
<h1>Title </h1>
<h6>/span>內容</h6>
<p>Date:june 23 2021</p>
毋庸置疑的是,這是對 "一帶一路 "倡議的回應。我想說的是,如果你是一個人,那么你就應該有一個人的尊嚴,而不是一個女人的尊嚴。勇氣。
<br>閱讀全文
</div>閱讀全文
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/326608.html
標籤:

