текст и изображения, используя Bootstrap 4 - PullRequest
Новая
       3

текст и изображения, используя Bootstrap 4

0 голосов
/ 28 февраля 2020

Мне нужно сделать обтекание текста вокруг изображения с помощью bootstrap 4, но я не могу найти, как.

Вот мой код: 

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
                    <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png" style="position: relative; right: 44px;">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
                </div>
                    </div>

Вот что у меня сейчас есть: Here what I have now:

Вот что я хотел бы иметь: Here what I would to have:

Как мне это сделать?

Ответы [ 2 ]

2 голосов
/ 28 февраля 2020

Я решаю ваш дизайн html и css. Пожалуйста, проверь это. Спасибо 

.img-fluid { position:absolute; left:-20px}
.alert.alert-warning { padding:30px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
                    <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png">Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
                </div>
                    </div>
1 голос
/ 28 февраля 2020

Попробуйте (Внимание: это решение использует абсолютные значения): 

<head>
	<style>
    	.content {
        	padding-left: 8px;
        	margin-top: -35px;
        }
	</style>
</head>
<body>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
    <div class="container">
        <div class="alert alert-warning" role="alert">
            <img class="img-fluid" src="https://i.imgur.com/JgqPv7T.png" style="position: relative; right: 44px; ">
            <p class="content">
Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
			</p>
        </div>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...