gpt4 book ai didi

css - 如何使用 Bootstrap 在容器内制作带有内联图像的文本

转载 作者:太空宇宙 更新时间:2023-11-04 09:41:46 24 4
gpt4 key购买 nike

我一直在寻找这个解决方案,甚至尝试过自己但没有运气。

我想使图像从半宽到浏览器的右边缘

<section class="map-cont">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class="main-heading">heading</h2>
<p>text</p>
</div>
<div class="col-md-6">
<img src="img/map.jpg" alt="" class="map" />
</div>
</div>
</div>
</section>

我想实现这个,请看下图。

enter image description here

最佳答案

您不必编写任何额外的 CSS。只需将 Bootstrap 类“img-responsive”添加到您的图像即可。

<img src="img/map.jpg" alt="" class="map img-resonsive" />

来自Bootstrap 3 documentation :

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

编辑:要给类从 col-md-6 的右侧留出边距,只需像这样覆盖 CSS:

.img-responsive {
max-width: 50% !important;
}

请注意,这会更改此类的所有图像,因此如果您不希望出现这种情况,您可能需要更具体地定位它。

关于css - 如何使用 Bootstrap 在容器内制作带有内联图像的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39839276/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com