Bootstrap 列垂直堆疊而不是水平堆疊

Question

 .card { height: 600px; width: 800px; background-color: darkseagreen; padding: 20px; } .box1 { background-color: floralwhite; } .box2 { background-color: rgb(238, 185, 80); } .box3 { background-color: indianred; } .box4 { background-color: rgb(137, 137, 235); } .box5 { background-color: rosybrown; } .box6 { background-color: sienna; }

 <!-- Bootstrap-4 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Body --> <div class="container"> <div class="row card mx-auto"> <div class=" col-4 box box1">BOX1</div> <div class=" col-4 box box2">BOX2</div> <div class=" col-4 box box3">BOX3</div> <div class=" col box box4">BOX4</div> <div class=" col box box5">BOX5</div> <div class=" col box box6">BOX6</div> </div> </div>

我一直在嘗試使用 bootstrap 網格來創建一個網格，但是列是垂直堆疊而不是水平堆疊。 我正在嘗試實現如圖所示的網格：

Answer 1

那是因為你使用的是 class card 。

card是 bootstrap 的內置類名，它垂直對齊其中的項目。

您可以簡單地將類card重命名為card2之類的任何其他名稱，它會起作用。

工作示例：

https://jsfiddle.net/es318vm7/1/

 .card2 { height: 600px; width: 800px; background-color: darkseagreen; padding: 20px; } .box1 { background-color: floralwhite; } .box2 { background-color: rgb(238, 185, 80); } .box3 { background-color: indianred; } .box4 { background-color: rgb(137, 137, 235); } .box5 { background-color: rosybrown; } .box6 { background-color: sienna; }

 <!-- Bootstrap-4 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Body --> <div class="container"> <div class="row card2 mx-auto"> <div class=" col-4 box box1">BOX1</div> <div class=" col-4 box box2">BOX2</div> <div class=" col-4 box box3">BOX3</div> <div class=" col box box4">BOX4</div> <div class=" col box box5">BOX5</div> <div class=" col box box6">BOX6</div> </div> </div>

Answer 2

您將不得不將您的集裝箱名片更改為其他內容

.card類是 bootstrap 的內置組件之一，無法使用

檢查下面的小提琴並根據您的要求調整您的元素。

 .card { height: 600px; width: 800px; background-color: darkseagreen; padding: 20px; } .box { min-height:150px; margin:10px; padding:10px; } .box1 { background-color: floralwhite; } .box2 { background-color: rgb(238, 185, 80); } .box3 { background-color: indianred; } .box4 { background-color: rgb(137, 137, 235); } .box5 { background-color: rosybrown; } .box6 { background-color: sienna; }

 <!-- Bootstrap-4 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- Body --> <div class="container"> <div class="row mx-auto"> <div class="col-4"><div class="box box1">BOX1</div></div> <div class="col-4"><div class="box box2">BOX2</div></div> <div class="col-4"><div class="box box3">BOX3</div></div> <div class="col-4"><div class="box box4">BOX4</div></div> <div class="col-4"><div class="box box5">BOX5</div></div> <div class="col-4"><div class="box box6">BOX6</div></div> </div> </div>