使用Bootstrap 4在图像周围环绕文本
[英]Wrapping Text Around Image Using Bootstrap 4
问题描述
With regard to Bootstrap 4: 
关于Bootstrap 4：
Consider the following HTML/CSS code which is currently not responsive (there are currently no Bootstrap "col-". The Lorem Ipsum word wraps the image on the right side, as well as below the image, as a result of the float-left. 考虑以下当前没有响应的HTML / CSS代码（当前没有Bootstrap“col-”.Lorem Ipsum单词将图像包装在右侧以及图像下方，因为浮动左侧。
<img class="pr-3 pb-3 float-left" src="~/Images/some_image.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl arcu, tempor a purus quis, congue rutrum libero. Suspendisse potenti. Aliquam nibh massa, tristique quis sodales at, fermentum at ex. Integer nec elementum nibh. Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. In euismod enim mi ut purus. Morbi ac quam lectus. </p> <p> Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. In pellentesque dui turpis ut quam. Praesent ullamcorper eros at lectus elementum tempus. Donec fermentum velit nec fermentum bibendum. In sit amet aliquam nulla, at vestibulum ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lacus purus, interdum nec blandit vel, lacinia ac ex. </p>
I am unsure what Bootstrap syntax to use to keep the word wrap in place at the "md" breakpoint, and then at "sm" breakpoint goto "col-12" on the image, and "col-12" on the text, placing the text below the image, vice the current word wrap. 我不确定使用什么Bootstrap语法来保持在“md”断点处的自动换行 ，然后在图像上的“sm”断点goto“col-12”，以及文本上的“col-12”，放置图像下面的文字，副目前的自动换行。
Thanks. 谢谢。
4 个解决方案
解决方案1
0 2019-04-25 05:14:47
BS4 has responsive floats. BS4有响应浮动。 So if you set float-left-md on the image it should help. 所以如果你在图像上设置float-left-md它应该有帮助。 https://getbootstrap.com/docs/4.0/utilities/float/#responsive https://getbootstrap.com/docs/4.0/utilities/float/#responsive
Example: 例：
<img class="pr-md-3 pb-3 float-md-left img-fluid" src="https://via.placeholder.com/150" />
https://codepen.io/crishpeen/pen/PgxELO https://codepen.io/crishpeen/pen/PgxELO
解决方案2
0 2019-04-25 06:02:33
You can achieve this with css as well. 您也可以使用css实现此目的。 Remove the float-left from the html in your img class and then add this to your css: 从你的img类中的html中删除float-left ，然后将其添加到你的css：
img {
float: left;
}
@media only screen and (max-width: 540px) {
img {
float: none
}
}
解决方案3
0 2019-04-25 06:05:02
Use this It will word wrap the image at the "md" breakponit and at the "sm" breakpoint It will put the text below the image. 使用它将在“md”breakponit和“sm”断点处对图像进行自动换行。它会将文本放在图像下方。
<html> <head> <title>Wrapping Text Around Image</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <style type="text/css"> .pb-3 { padding-bottom: 0 !important; } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { .float-md-left { float: none !important; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .float-md-left { float: none !important; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .float-md-left { float: left !important; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .float-md-left { float: left !important; } } </style> </head> <body> <img class="pr-3 pb-3 float-md-left" src="https://via.placeholder.com/140x100" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl arcu, tempor a purus quis, congue rutrum libero. Suspendisse potenti. Aliquam nibh massa, tristique quis sodales at, fermentum at ex. Integer nec elementum nibh. Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. In euismod enim mi ut purus. Morbi ac quam lectus. </p> <p> Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. In pellentesque dui turpis ut quam. Praesent ullamcorper eros at lectus elementum tempus. Donec fermentum velit nec fermentum bibendum. In sit amet aliquam nulla, at vestibulum ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lacus purus, interdum nec blandit vel, lacinia ac ex. </p> </body> </html>
解决方案4
0 已采纳 2019-04-25 06:53:31
I do not think it is possible to transition an element from float to col, responsively. 我不认为有可能将一个元素从float转换为col。 But you can responsively show and hide one of each 但是你可以相应地显示和隐藏其中一个
<img class="pr-3 pb-3 float-left d-none d-md-block" src="~/Images/some_image.png" />
<img class="pb-3 col-12 d-md-none" src="~/Images/some_image.png" />
The .float-left is initially hidden at xs with .d-none then shown from md up with .d-md-block , while the .col-12 is hidden for md up with .d-md-none .float-left最初隐藏在带有.d-none xs中，然后从md上显示.d-md-block ，而.col-12隐藏为md up .d-md-none
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.