我怎樣才能像截圖中那樣去分割螢屏?截圖中的網站是我的,我在 Elementor 中設計了它,但現在我想給它編碼。我怎樣才能用css和Boostrap做到這一點呢?
請訪問 mateusrdesign.com 親自查看。
這是我所嘗試的:
<div class="container"/span>>
<div class=" row">
< div id="left" class="col-3">/span>
<p>場所持有人</p>
</div>/span>
< div id="right" class="col-9">
<p>場所持有人</p>
</div>/span>
</div>/span>
</div>/span>
uj5u.com熱心網友回復:
你可以用一個flex box來實作這個目標:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** 只是為了在視覺上強調垂直分割。你可以將其洗掉 */
width: 50%。
}
.row #right {
background: green; /** 只是為了在視覺上強調垂直分割。你可以將其洗掉 */
flex: 1;
}
uj5u.com熱心網友回復:
<body style="height: 100vh;">
<div class="row w-100 h-100"/span>>
<div class="col bg-info"/span>>。 左側</div>
<div class="col bg-dark"/span>> 右側</div>>
</div>/span>
</body>
這是bootstrap的方法之一。不要忘記將bootstrap cdn匯入到html中。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/306709.html
標籤:
