使用 Bootstrap 4 的文本和圖像
[英]text and images using Bootstrap 4
問題描述
我需要使用 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> 這是我現在所擁有的：
這是我想要的：
我該怎么做 ？
2 個解決方案
解決方案1
2 已采納 2020-02-28 09:45:54
我解決了你的設計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>
解決方案2
1 2020-02-28 09:42:43
試試這個（警告：這個解決方案使用絕對值）：
<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>
帶有文本和圖像的 Bootstrap 3 面板（圖像具有不同的背景）
[英]Bootstrap 3 panels with text and images (with different background for the images)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.