Bootstrap выравнивает элементы в столбце

У меня возникла следующая проблема:

На рисунке 1 показан прототип: Bootstrap выравнивает элементы в столбце

Я использую Bootstrap 5 в качестве CSS-фреймворка. Я думал, что смогу справиться с этим через встроенные столбцы, но я не нашел никакого решения и сейчас изо всех сил борюсь.

На рисунке 2 показано мое решение: Bootstrap выравнивает элементы в столбце

Я попробовал flexbox, но не нашел решения.

<div class = "col-lg-6 col-md-1">
 <div class = "row">
  <img src = "https://place-hold.it/90" class = "col-lg-3 col-md-12 facts-img">
  <h3 class = "facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class = "facts-p col-lg-6 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
 </div>
</div>

css bootstrap-5

06.04.2022 08:19

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Ваша структура неверна. Вам нужен row, чтобы заключить немедленные col, а затем новый row для следующего col. Попробуй это:

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <title>Document</title>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
</head>

<body>
  <div class = "row">
    <div class = "col-lg-6">
      <div class = "row">
        <div class = "col-sm-2 d-flex align-items-center justify-content-center">
          <img src = "https://place-hold.it/90" class = "col-lg-3 col-md-12 facts-img">
        </div>
        <div class = "col-sm-10">
          <h3 class = "facts-header col-lg-2 col-md-12">
            Licht
          </h3>
          <p class = "facts-p col-lg-6 col-md-12 facts-text">
            Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die unterschiedlichen Farben wahr. Licht schafft Ambiente.
          </p>
        </div>
      </div>
    </div>
    <div class = "col-lg-6">
      <div class = "row">
        <div class = "col-sm-2 d-flex align-items-center justify-content-center">
          <img src = "https://place-hold.it/90" class = "col-lg-3 col-md-12 facts-img">
        </div>
        <div class = "col-sm-10">
          <h3 class = "facts-header col-lg-2 col-md-12">
            Licht
          </h3>
          <p class = "facts-p col-lg-6 col-md-12 facts-text">
            Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die unterschiedlichen Farben wahr. Licht schafft Ambiente.
          </p>
        </div>
      </div>
    </div>

    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
</body>

</html>

Спасибо за совет - я почти там. Теперь изображение в начале каждого столбца должно располагаться по центру. У вас есть совет по этому поводу?

— 06.04.2022 08:47

Обновил ответ.

— 06.04.2022 09:07

Без проблем. Внимательно прочитайте документацию, в ней есть почти все, что вам когда-либо понадобится.

— 06.04.2022 09:32

Да, мне нужно больше изучить документацию. У вас есть какое-нибудь учебное предложение? :) Хорошие уроки BS5 - редкость.

— 06.04.2022 10:41

Честно не знаю. Я только что узнал/учусь из самой документации.

— 06.04.2022 11:16

06.04.2022 08:32

Просто, чтобы дать орлиный взгляд. Используйте классы в следующей иерархии

.Container 
   . row //main row
      .col //block for Licht  
        .row // wrapper for Licht
          .col // column for round object
          .col // column for text element
             .row // for heading Licht
             .row // for description 

      .col // column for Design 
        .row // wrapper for Design
          .col // column for round object
          .col // column for text element
             .row // for heading Design
             .row // for description

06.04.2022 08:36

вы можете попробовать с медиа-объектом

Пример 1

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "d-flex">
  <div class = "flex-shrink-0">
   <img src = "https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class = "mr-3"  width = "150" alt = "...">
  </div>
  <div class = "flex-grow-1 ms-3">
  <h5 class = "mt-0">Media heading</h5>
   <p>
   This is some content from a media component. You can replace this with any content and adjust it as needed.
   </p> 
  </div>
</div>

Пример 2

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "row">
    <div class = "col-lg-6">
      <div class = "row">
        <div class = "col-sm-3">
          <img src = "https://www.pavilionweb.com/wp-content/uploads/2017/03/man-300x300.png" class = "mr-3 img-fluid"  alt = "...">
        </div>
        <div class = "col-sm-9">
          <h3 class = "facts-header col-lg-2 col-md-12">
            heading
          </h3>
          <p class = "facts-p col-lg-6 col-md-12 facts-text">
           This is some content from a media component. You can replace this with any content and adjust it as needed.
          </p>
        </div>
      </div>
    </div>
</div>

06.04.2022 08:41

Вы также можете использовать flex для этого

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
<div class = "d-flex flex-column flex-md-row p-4 w-100">
 <div class = "d-flex flex-row align-items-center">
  <div class = "p-2">
   <img src = "https://place-hold.it/90" class = "col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class = "d-flex flex-column ">
  <h3 class = "facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class = "facts-p col-lg-8 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
  </div>
 </div>
 
 <div class = "d-flex flex-row align-items-center">
  <div class = "p-2">
   <img src = "https://place-hold.it/90" class = "col-lg-12 col-md-12 facts-img rounded-circle">
  </div>
  <div class = "d-flex flex-column ">
  <h3 class = "facts-header col-lg-2 col-md-12">
   Licht
  </h3>
  <p class = "facts-p col-lg-8 col-md-12 facts-text">
   Das zentrale Element in unserem Leben. Es weckt Emotionen, beeinflusst unser
   Wohlbefinden und füllt unsere Energiespeicher auf. Durch das Licht nehmen wir die
   unterschiedlichen Farben wahr. Licht schafft Ambiente.
  </p>
  </div>
 </div>
</div>

06.04.2022 08:50

Другие вопросы по теме

Изменить значение <input type=color> onChange

Почему слайд-карусель в моем коде не работает?

Как отключить горизонтальную прокрутку на веб-сайте NavBar с помощью Bootstrap

Позиционирование фонового изображения тела относительно дочернего элемента div

Bootstrap 5 навигационная панель вне холста

Центрирование .png с высоким z-индексом внутри div

Мобильный сайт немного выходит за пределы ширины экрана устройства

Vue Accordion предотвращает запуск событий по клику

Html CSS boostrap 5 реагирует на большой экран, некоторые элементы выглядят иначе

Показать прокрутку для дочернего элемента с flex-grow 1

Bootstrap выравнивает элементы в столбце

Ответы 4

Другие вопросы по теме

Похожие вопросы