在引导图像周围环绕文本答案

【问题标题】：Wrap text around bootstrap image在引导图像周围环绕文本
【发布时间】：2021-05-28 18:58:27
【问题描述】：

我一直在尝试使用引导程序的网格系统将文本环绕在图像周围以限制图像的宽度。总体布局很像这样。

我正在使用

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div>  
        {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-xs-12">
        <hr />
    </div>
</div>

此代码导致以下布局。

我已尝试删除第二列，只保留嵌套图像的列。

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="row">
        <div class="col-sm-6">
            <h2>{!!$blogPost->title!!}</h2>
        </div>
        <div class="col-sm-6">
            <h3 class="pull-right">
                {{$blogPost->created_at}}
            </h3>
        </div>
    </div>  
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

这将导致其他意外的文本放置，如这里所示。

我怎样才能达到预期的效果并继续使用引导网格系统来设置我的图像的宽度与视口的大小有关？

【问题讨论】：

标签： html image twitter-bootstrap-3

【解决方案1】：

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div> 
    </div>
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

将标题和 created at 日期包装在一个新列中以补充图像的宽度并将所有其他文本设置在任何列之外对我来说是诀窍。
一个小的缺点是边距不对齐，但我相信我会使用一些自定义 CSS 找到解决方法。

【讨论】：

【解决方案2】：

@milo526 的答案非常好，行的负边距和文本没有边距只是一个小缺陷。您可以添加一个 div 用边距或填充物将文本包裹在您的装订线宽度的一半或使用不带浮动的 col-sm-12 。另一个小缺陷是图像和文本之间没有足够的边距，因此您应该为图像添加额外的右填充。我将这些调整置于内联样式中，因此它们是可见的。

<div class="row">
    <div class="col-sm-5" style="padding-right:30px;">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div> 
    </div>
    <div class="col-sm-12" style="float: none;">
      {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-sm-12">
        <hr />
    </div>
</div>

https://codepen.io/davdenic/pen/bPGRqa

【讨论】：

回答了一个有点老的问题，但似乎是一个很好的解决方案??
你的回答很好。如何将图像对齐到文本的右侧？
@SreejithSasidharan 你想让文字在左边，图片在右边？在这种情况下，有两种方法：第一种是使用 pull-right 和 pull-left 类。第二种解决方案，如果您可以更改 html 代码并首先为文本编写 div,col-sm-x，然后为图像编写 div.col-sm-y。我更喜欢第二种解决方案。这两种解决方案都需要对内部填充进行一些调整。
这不适用于最新版本的引导程序（在 4.5 上测试）

【解决方案3】：

使用引导程序的示例：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
  <div class="span12">
    <img src="http://www.vanilladome.fr/games/artworks/SM3DW_PERSOS_MARIO2.png" class="pull-left myclass" />
    <span>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </span>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
      industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
      1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>

  </div>
</div>

【讨论】：

我知道我不需要引导程序来解决问题。我想使用引导程序来赞美我网站上的其他元素。使用引导网格系统将更容易在移动布局和桌面布局之间切换，并有助于保持一致性。
@milo526 添加了引导示例。
但是图片没有响应

【解决方案4】：

对我有用的是以下内容（基于 OP 的原始代码）。请注意，我使用了max-width 样式属性来保持响应能力（40% 大约是 12 个中的 5 个）：

<div class="row">
    <div class="col-xs-12">
        <img class="pull-left" style="max-width:40%;" src="{{$blogPost->getImagePath()}}">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                {{$blogPost->created_at}}
                </h3>
            </div>
        </div>  
        {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-xs-12">
        <hr />
    </div>
</div>

【讨论】：

【解决方案5】：

您需要将图像容器向左浮动。

<div class="col-xs-12 col-sm-5 pull-left">
    <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
</div>

这将强制文本环绕

【讨论】：

我试过这个。它的布局与上一张图片显示的完全相同，主要文本仅在图片下方，而不是在图片旁边。
这很可能归结为引导.row 和.col 使用您的布局，您可能不想使用引导网格。我很想把它剥离回到基础，然后从那里开始

【解决方案6】：

这适用于引导程序 4：

<div class="row">
    <div class="col-12 col-lg-2">
        <img src="http://placehold.it/150x150" alt="" class="img-responsive float-left mr-3">
    </div>
    <div class="col-lg-10">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui 
temporibus aliquid dignissimos dolor aut at, libero est obcaecati atque 
culpa, sequi reiciendis nostrum cumque magnam nulla in molestias 
nesciunt illo?</p>
    </div>
</div>

【讨论】：

【解决方案7】：

bootsrap 4 带有图像的文本变形

请在傻瓜页面查看 click here enter image description here

<!doctype html>
<html lang="en">
  <head>
    <title>School</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <link rel="stylesheet" href="/css/style.css"  type="text/css">
<style>
   
</style>

</head>
  <body>
    <div class="header_details bright-pre-header bright-pre-header-mobile-disable bg-dark-color">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-5 bright-pre-header-item-left">
                                            
                        <div class="pull-left">
                             <i class="fa fa-map-marker" aria-hidden="true"></i> Near kanpur road, Nh 25, Kanpur Rd, Kanpur                             </div>
                                            </div>
                <div class="col-sm-7 bright-pre-header-item-right text-right">
                    <div class="quick-contacts pull-right">
      
                        <span class="bright-top-bar-mobile"><i class="fa fa-phone"></i> <a style="text-decoration: none; color:white" href="tel:0515 2829000">0515 2829000</a></span>
                        <span class="bright-top-bar-email"><i class="fa fa-envelope"></i><a  style="text-decoration: none; color:white" href="mailto:inf%6f%40%67punn%61o.com">info@gpunnao.com</a></span>
                        
                    </div>
                </div>
            </div>
        </div>
      </div>
      <h2 class="bg-dark-color m-0 header_he text-center"><div class="container"><span>GOVERNMENT POLYTECHNIC KANPUR</span><img src="https://i.pinimg.com/564x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" style="height: 70px; width: 70px;"> <span>
        राजकीय पॉलिटेक्निक 
        कानपुर</span></div>          </h2>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary p-0 sticky-top">
        <div class="brand_name"> <a class="navbar-brand" href="#">&nbsp;<img src="https://i.pinimg.com/564x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" style="height: 30px; width: 30px;"> <span>
            राजकीय पॉलिटेक्निक 
            कानपुर</span></a></div>
       
        <button class="navbar-toggler align-self-center ml-auto" type="button"  data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
      </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto bg-link-color">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home</a>
            </li>
      
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
      
              <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
      
              <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
              </li>
            
            
           
          </ul>
          
        </div>
      </nav>
      
      
      
      
    <div  class="container-fluid m-0 p-0 text-light" style="background:#2846F0;">
        <h2 class="text-center">Principal</h2>
     <div  class="text-center"><span>Home</span> <i class="fa fa-caret-right" style="font-size:15px;"></i><span> Principal</span></div>


    </div>



  <div class="container">
      <div row>
<div class="col-lg-4 col-sm-12 ">
    <img src="https://thesunpapers.com/wp-content/uploads/sites/19/2020/02/IMG_3097-scaled.jpg" class="img-thumbnail float-left mr-2 mb-1" >
</div> 
<div class="col-lg-12 col-sm-12">
    <h2 class="text-center">MR  Peter </h2>
    <p>
         
         
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


      </p>
      <p>
         
         
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


    </p>
    <p>
         
         
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved o


    </p>
</div>
      </div>
  </div>
      


      
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：

【解决方案8】：

以下在引导程序 4 中对我有用：

<div class="row">
  <div class="col-md-12">
      <div class="float-left"  >
       <div class="float-right" style="max-width:50%;"><img src="/your/image/here" class="img-fluid" alt=""></div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit risus ut massa ornare pellentesque. Proin id leo id arcu placerat tincidunt.
         Integer eget porta metus, ac ultricies eros. Etiam aliquet sodales gravida. Integer neque mauris, malesuada sit amet ante ac, sagittis elementum lacus. 
         Nulla tellus nibh, tempus et elit vel, lobortis hendrerit felis.
         Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In pretium purus quis erat dapibus hendrerit.
    </div>      
  </div>
</div>

【讨论】：