我在以大约1355px的尺寸将文字环绕图像时遇到问题。我尝试在div容器和实际的img标签上都使用float-left，但没有任何效果。我不确定这是否是因为我拥有列设置，是否应该在类中添加lg列设置？还是如果我想弄乱img的宽度和高度？我想将此更改包括在媒体查询中。这是我的代码和正在发生的情况。文字未环绕图像
这是我的代码
<section id="ourStory">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img src="img/uf_5.png" class="img-fluid float-left" alt="stray dog lying down">
</div><!--column-->
<div class="col-md-6">
<h1>Our Story</h1>
<p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br>
Bibendum neque egestas congue quisque egestas. Enim blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br>
Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
</p>
</div><!--column-->
</div><!--row-->
</div><!--container-->
</section>
您是否正在寻找这样的东西-
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<section id="ourStory">
<div class="container-fluid">
<div>
<div class="col-md-6 m-3">
<img src="https://www.w3schools.com/css/img_mountains.jpg" class="img-fluid float-left mr-4" alt="stray dog lying down">
</div>
<!--column-->
<div class="col-md-12">
<h1>Our Story</h1>
<p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin
libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br> Bibendum neque egestas congue quisque egestas. Enim
blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam
purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus
nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing
tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.
Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
</p>
</div>
<!--column-->
</div>
<!--row-->
</div>
<!--container-->
</section>我只是将图像和文本放入一个div中，并指定它使用整个12格引导程序，因此文本将在大屏幕上向右浮动，并在屏幕尺寸变小时进入图像下方。
在您的代码中，您会这样-
<div class="row">
<div class="col-md-6">
.
.
</div>
<div class="col-md-6">
.
.
</div>
</div>
因此，您在每个div上都有一行包含6个网格的行（在宽度> 768px的屏幕上），如下所示-
--------------------------------------ROW-START-------------------------------------------
|
|
|
|
|
6 G R I D S | 6 G R I D S
IMAGE | TEXT
|
|
|
-----------------------------------------ROW-END---------------------------------------
这样，当文字位于图片下方时，您将无法将文字环绕在图片周围。在Bootstrap中，“行”类主要用于在其中保留列。Bootstrap将每一行划分为12个虚拟列的网格。即使图像结束，图像也将占据列，这就是为什么文本无法环绕图像的原因。
在我的代码中，您有-
<div class="col-10 col-md-12">
<div class="col-md-6 m-3">
.
.
</div>
<div class="col-md-12">
.
.
</div>
</div>
因此，这里在一个div中有两个div，其中有12个网格。您的布局将是-
--------------------------------------DIV-START-------------------------------------------
|
6 G R I D S | 6 G R I D S
TILL IMAGE EXISTS | USED BY TEXT
___________________________________________|
WHEN THE IMAGE ENDS ALL THE 12 GRIDS will be used by TEXT
-----------------------------------------DIV-END------------------------------------------
请注意，它具有img-fluid并float-left有助于保持图像的响应速度，防止在高分辨率图像的情况下图像溢出，并使文本显示在图像的右侧。
希望这可以帮助 ！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句