Bootstrap3 - 右对齐图像上的文本换行

Question

我正在使用 Bootstrap 3。页面左侧有文本，右侧有图像。我试图让文本环绕图像。我已经看到左对齐图像的例子，但我似乎无法得到相反的工作。

为了显示错误，我创建了一个example on JSFiddle。

有一个标题，然后是一个横幅，应该是页面的一半。他们的曲棍球运动员图像应位于横幅的右侧，并且 2 个图像的顶部应对齐，文本应立即在横幅下方开始，然后环绕在曲棍球运动员图像下方。就像报纸版面一样。

<div class="row">
    <div class="col-xs-12 col-sm-7">

        <h2>My Title</span></h2><!-- should be left aligned-->

        <img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
    </div>

     <div class="col-xs-12 col-sm-5 pull-right">
        <h2>&nbsp;</h2>
            <img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
    </div>

     <div class="col-xs-12">    
        <!-- This text should be under the title image and wrap underneath the larger image on the right-->
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

    </div>

   <div class="col-xs-12">

MORE TEXT HERE

Example Layout here

Answer 1

这可能是你想要的：

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
    ...
  </div>
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
</div>

Answer 2

这是你想要的吗？我制作了几个 div，让它看起来很简单，你没有在标题图像中添加特定的行，因为这两个图像开始内联堆叠。我更改了列 div。 CODEPEN exapmle

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
  <div class="row">
    <div class="col-xs-12 col-sm-7">

        <h2>My Title</span></h2><!-- should be left aligned-->

        <img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
    </div>
  </div>
<div class="row">
     <div class="col-xs-5 col-sm-5 pull-right">
      
            <img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
    </div>

     <div class="col-xs-7">    
        <!-- This text should be under the title image and wrap underneath the larger image on the right-->
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>
  </div>
    </div>
</div>
</div>
   

Answer 3

基本上，任何 UI 框架（Bootstrap）都依赖于网格。因此，您必须将每个块分开并将文本放在不同的列中，而图像必须放在不同的列中。

.bg-img{
  height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
    background-repeat: no-repeat;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
     <div class="col-xs-5 col-sm-5">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>           
    </div>
     <div class="col-xs-7">   
        <p>
        <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
        </p>      
     </div>
    </div>

   
 
  
<div class="row">
     <div class="col-xs-5 col-sm-5">
          <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
    </div>

     <div class="col-xs-7">   
      
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. 
        </p>
     
     </div>
 </div>
  
  <div class="row">
     <div class=" col-sm-6">
      <div class="bg-img">
         <h4> Lorem ipsu6 dolor sit amet</h4> 
       </div>
      </div>
     
     <div class="col-sm-6">   
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        </p>
      </div>
  </div>
 </div>

在上面的 sn-p 中，我采取了 3 行。在第一行中，我将图像设置在左侧，在第二行图像设置在右侧，第三行图像设置在第一行，图像上有文字。你可以运行我的 sn-p。祝你好运。很高兴能帮助你。

Answer 4

我已经用 bootstrap 3 解决了，它现在表现正确：

https://jsfiddle.net/cec9086a/

<div class="container">
    <div class="jumbotron">
    <div class="row">
    <h2>
   My Title
    </h2>
    </div>

      <div class="row">
          <div class="col-xs-12 col-sm-6 pull-left">

      <img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>

      </div>

<div class="col-xs-12 col-sm-6 pull-right">
        <img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>

    </div>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>


            <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>


      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
        </p>

      </div>


    </div>



</div>