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

时间：2016-11-19 03:50:37

标签： html css image twitter-bootstrap twitter-bootstrap-3

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

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

有一个TITLE，然后是一个横幅，应该是页面的一半。他们的曲棍球运动员图像应该在横幅的右侧，并且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

4 个答案:

答案 0 :(得分：0)

这可能是你想要的：

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

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
  <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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

基本上，任何UI框架（Bootstrap）都依赖于网格。所以你必须对每个块进行分离，并将不同的列和图像放在不同的列中。

＆＃13;
＆＃13; 
.bg-img{
  height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
    background-repeat: no-repeat;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在上面的代码片段中，我拍摄了3行。在第一行中，我在左侧设置图像，在第二行图像设置在右侧，第三行图像设置为第一行，文本在图像上。你可以运行我的代码片段。祝好运。乐于帮助。

答案 3 :(得分：0)

我已经用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>
相关问题
最新问题