是否可以垂直網格引導？
[英]Is it possible to grid bootstrap vertically?
問題描述
似乎 bootstrap 只能產生水平網格系統，這讓我很難嘗試開發一個項目。 這是我正在嘗試做的事情：
我的頁面分為 4 個部分，每個塊的左側高度與右側塊的高度不同。
我想讓左邊有相同的高度，而右邊有不同的高度和寬度，當網格是水平系統時我可以這樣做。
我希望 box1 和 box2 具有相同的高度 (vh-50)，然后 box3 具有相同的高度。 我想要的網格布局：
我試過這樣做，但它不起作用而且看起來很糟糕。
#infoBox { height: 50vh; width: 60vh; } #tracklistBox { height: 60vh; width: 40vh; } #playBox { height: 50vh; } #episodesBox { height: 40vh; }
<body class="d-flex flex-column min-vh-100"> <div class="container-fluid"> <div class="row "> <div id="infoBox" class="col border"> 1 of 2 </div> <div id="tracklistBox" class="col border"> 2 of 2 </div> </div> <div class="row"> <div id="playBox" class="col border"> 1 of 3 </div> <div id="episodesBox" class="col border"> 2 of 3 </div> </div> </div> </body>
1 個解決方案
解決方案1
0 2023-01-18 22:38:58
它不是引導程序，但您可以使用網格系統
.parent { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; }.div1 { grid-area: 1 / 1 / 3 / 3; background-color: aqua; }.div2 { grid-area: 3 / 1 / 5 / 3; background-color: yellow; }.div3 { grid-area: 1 / 3 / 4 / 4; background-color: violet; }.div4 { grid-area: 4 / 3 / 5 / 4; background-color: greenyellow; } <div class="parent"> <div class="div1">Box 1</div> <div class="div2">Box 2</div> <div class="div3">Box 3</div> <div class="div4">Box 4</div> </div>
垂直堆疊Bootstrap網格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.