Блог

Главная - Вопросы по программированию - Начальная загрузка столбцов, расположенных вертикально, а не горизонтально

Начальная загрузка столбцов, расположенных вертикально, а не горизонтально

#html #css #bootstrap-4 #bootstrap-grid

Вопрос:

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

Я пытался использовать сетку начальной загрузки для создания сетки, однако столбцы укладываются вертикально, а не горизонтально. Я пытаюсь получить сетку, как на картинке:

сетка-фото

Ответ №1:

Это потому, что вы используете класс card .

card это имя встроенного класса для начальной загрузки, которое выравнивает элементы внутри него по вертикали.

Вы можете просто переименовать класс 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>

Ответ №2:

Вам нужно будет сменить карточку с именем контейнера на что-то другое

.card класс является одним из встроенных компонентов начальной загрузки, который нельзя использовать

Проверьте приведенную ниже скрипку и настройте свои элементы в соответствии с вашими требованиями.

 .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>
Метки: , ,