Bootstrap класс самовыравнивания flexbox не работает должным образом - PullRequest
Новая
       76

Bootstrap класс самовыравнивания flexbox не работает должным образом

0 голосов
/ 12 июля 2020

Я пытаюсь создать макет сообщения в блоге, используя bootstrap. Я пытаюсь разместить изображение своего блога слева, заголовок справа и имя автора внизу заголовка. Но это не работает. Текст автора идет справа.

https://i.stack.imgur.com/X0CZ5.jpg

мой код: 

        <div class="blog">
            <div class="row">
                <div class="col-md-6 d-flex align-items-center">
                    <img src="images/photo/blog-1.png" alt="">
                    <h4>13 of My Favorite UI/UX Goodies</h4>
                    <p class="flex-column align-self-end">By <span>Danny Sapio</span></p>
                </div>
            </div>
        </div>

1 Ответ

0 голосов
/ 12 июля 2020

Вам нужно создать два столбца для отображения информации. Попробуйте следующее: 

<div class="blog">
    <div class="row">
         <div class="col-md-6 d-flex align-items-center">
              <img src="images/photo/blog-1.png" alt="">
         </div>
         <div class="col-md-6 d-flex align-items-center">
               <h4>13 of My Favorite UI/UX Goodies</h4>
               <p class="flex-column align-self-end">By <span>Danny Sapio</span></p>
         </div>
    </div>
</div>

Попробуйте и посмотрите, получите ли вы желаемый результат.

...