Блог

Главная - Вопросы по программированию - bootstrap — как добавить поле и заставить эти карточки отображаться горизонтально

bootstrap — как добавить поле и заставить эти карточки отображаться горизонтально

#html #layout #bootstrap-4 #margin #bootstrap-cards

#HTML #макет #начальная загрузка-4 #поле #bootstrap-карточки

Вопрос:

У меня есть следующий код и страница html (с поддержкой boostrap), на которой просто отображаются три карточки начальной загрузки с изображениями на странице.

Я хочу

а) Поле с левой стороны должно быть включено б) Карты должны отображаться горизонтально (по экрану одна за другой), а не вертикально.

Я пробовал разные вещи, но безрезультатно. Может ли кто-нибудь с четким объяснением для новичка объяснить, как этого добиться.

Полный код

 <html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>

<h1>Website</h1> 
<h2>Site with multiple horizontal cards</h2>

<!-- card 1--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<!-- card 2--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
<!-- card 3--> 
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

</html>

Брелок

https://trinket.io/html/8fcb4c4f39?runMode=autorun

Текущее отображение

введите описание изображения здесь

Обновить:

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

 <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>

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

Ответ №1:

Вот код, который я изменил по вашей опубликованной ссылке на брелок

Убедитесь, что вы прочитали документацию по bootstrap с официального сайта или любой учебник о системе 12 grid в bootstrap.

 <html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>

<h1>Website</h1> 
<h2>Site with multiple horizontal cards</h2>
<div class="container">
  <div class="row">
<!-- card 1--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>
<!-- card 2--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 1</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>
<!-- card 3--> 
<div class="col-4">
<div class="card" style="width: 14rem;">
  <img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card 2</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  </div>
</div>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>

</html>

Изменения

введите описание изображения здесь