我是初學者，正在學習使用 API 的教程。我想更改設計的布局，而不是一列，我想要一個三列布局。我不知道我是否正確使用了 flexbox。
我試過使用行然后有三列，但不知何故它顯示不正確。我也在使用引導程式。
jsfiddle.net/e5bqsywk/2/
uj5u.com熱心網友回復：
您正在尋找的是CSS Grid，它可以讓您在行和列中顯示元素。
只需將您的 flexbox 更改為具有 3 個相等列的網格：
/* display: flex; */
display: grid;
grid-template-columns: repeat(3, 1fr);
uj5u.com熱心網友回復：
首先，我們需要清理您的 HTML 結構。
因為在您的 javascript 中，您將所有卡片附加到“影像容器”類中，我們必須洗掉重復的 div。
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
<div class="col-md-4">
<div class="images-container"></div>
</div>
</div>
</div>
并把它們變成了。所以它只會附加到一個容器中并在那里做我們的彈性。
<div class="container-fluid">
<div class="row">
<div class="images-container"></div>
</div>
</div>
下一個是 CSS，我在“images-container”上添加了一個“flex-wrap: wrap”，這樣只要沒有剩余空間，卡片就會進入下一行。
/* Images Container */
.images-container {
width: 100%;
margin-top: 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
并且由于您遵循引導類名稱，因此您必須在帶有斷點的類名稱上添加媒體查詢。它說該卡將在 xs“最小螢屏”上占用 12 列，在中等螢屏上占用 4 列。
.col-xs-12 {
width: 100%;
}
@media onyl screen and (min-width: 767px) {
.col-md-4 {
width: 33% !important;
}
}
現在在javascript上。因為我們將卡片放在“影像容器”中。然后我們需要直接在卡上添加類名“col-md-4”和“col-xs-12”，這樣它就有自己的寬度
// Card Container
const card = document.createElement("div");
card.classList.add("card");
card.classList.add("col-md-4");
card.classList.add("col-xs-12");
對于冗長的解釋感到抱歉，我仍在提高我的解釋技巧，希望它會對您有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405465.html
標籤：
上一篇：一個網頁上的簡單數學