Question

我一直在尝试使用bootstrap的网格系统在图像周围包装文本以限制图像的宽度。总体布局很像这样。

我目前正在使用

<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>

这将导致其他意外的文字放置，如此处所示。

如何实现所需效果并继续使用引导网格系统来设置图像宽度与视口大小的关系？

Answer 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。

Answer 2

使用bootstrap的示例：

＆＃13;

<!-- 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>

＆＃13;

Answer 3

@ milo526的答案效果很好，行的负边距给出了一个小缺陷，文本没有边距。您可以添加一个div，该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

Answer 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>

Answer 5

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

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

这将强制文本环绕

Answer 6

这适用于bootstrap 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>

Answer 7

bootsrap 4 text-warp with images

请在傻瓜页面查看 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>

Answer 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>

在bootstrap图像周围包装文本

8 个答案: