1. 首页
  2. 问答
  3. Bootstrap3 - 在右对齐图像上的文字换行

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

2016-11-19 50 views
-1

我使用的是Bootstrap 3.我在页面左侧有一个文本，右侧有一个图像。我试图让文字环绕图像。我已经看到了这个左对齐图像的例子，但我似乎无法得到相反的工作。Bootstrap3 - 在右对齐图像上的文字换行

要显示的错误，我已经创建了一个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

来源

2016-11-19 MikeOak

+0

您想在图片文字？ –

+0

我在这里添加了一个布局示例：https：//i.stack.imgur.com/cDXp3.png – MikeOak

回答

0

我已经解决了与引导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>

来源

2016-11-24 18:45:12 MikeOak

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>

来源

2016-11-19 04:04:20 Indrawan

+0

这一个仍然只是在右侧的图像，但左侧列中的任何文本不包裹在图像下面在右侧，在图像下方留下空白区域。 – MikeOak

0

这是你想要什么我做了几个div，并使它看起来很简单，你的天堂”？ t添加特定的行到您的头像图像，因为这两个图像开始堆栈内联。并且我改变了列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>

来源

2016-11-19 04:10:59 AVI

+0

这与我想要的很接近，但你遇到了我遇到的同样的问题。左边的最后一段不会在右侧的黄色框图像下面流动，它保留了占用屏幕空间的空白区域。 – MikeOak

+0

你可以显示一张图片或者描绘你想要的东西吗？ @MikeOak – AVI

+0

嗨@JokerFan，这是一个布局示例图片：https://i.stack.imgur.com/cDXp3.png谢谢！左边的文字可能是变化的，只是在曲棍球运动员的形象下流动，无论大段落或段落数量如何 – MikeOak

0

基本上，任何UI框架（引导）依赖于一个网格。所以你必须做每个块的分离，并把文本不同的列和图像必须放在不同的列。

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

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

来源

2016-11-19 04:56:02

+0

这也很接近，但请注意，如果向第一段添加更多文本，第一张图片。它将保留在最左侧的列中，并将其余页面中的元素向下推 – MikeOak

相关问题

 相关问题