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 的内置 class 名称，它垂直对齐其中的项目。

您只需将 class 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 class 是 bootstrap 的内置组件之一，无法使用

检查下面的 fiddle 并根据您的要求调整您的元素。

.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>

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

Bootstrap columns stacking vertically instead of horizontally

html

css

bootstrap-4

bootstrap-grid