对齐图像留在同一行的文字 - Twitter的引导
目前,我有一个段落标题,并在其右侧的图像,在同一行:对齐图像留在同一行的文字 - Twitter的引导
<div class="paragraphs">
<div class="row">
<div class="span4">
<div class="content-heading"><h3>Experience   </h3><img src="../site/img/success32.png"/></div>
<p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div>
这工作得很好 - 内容,标题和图像在同一行上。但是,当我将图像放在内容标题div之前时,它们不再位于同一行。这是我想要实现的 - 图像然后是内容标题 - 在同一行上。
您可以使用浮动:
<div class="paragraphs">
<div class="row">
<div class="span4">
<img style="float:left" src="../site/img/success32.png"/>
<div class="content-heading"><h3>Experience   </h3></div>
<p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div>
如果你想以下<p>
留在同一行也删除其
style="clear:both"
但你应该添加
<div style="clear:both"></div>
它后面有
。
使用Twitter的引导类可能是最好的选择:
-
pull-left
使得浮动左 -
clearfix
一个元件允许所述元件包含浮动元素(如果不是通过另一个类已经被设置)
<div class="paragraphs">
<div class="row">
<div class="span4">
<div class="clearfix content-heading">
<img class="pull-left" src="../site/img/success32.png"/>
<h3>Experience   </h3>
</div>
<p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div>
实际上,[Bootstrap for media](http://twitter.github.io/bootstrap/components.html#media)(例如图片)中的特殊课程需要对齐海报:_media_,_media \ _header_和_media \ _body_ – 2013-07-04 13:11:45
@RaulPinto事实上,它并不是真正宽容的,它与OP的布局不匹配:http:// jsbin。com/ipuyut/2 /编辑 – Sherbrow 2013-07-04 17:36:48
嗯,我想,OP想要它在“体验2”http://jsbin.com/utogiz/1/edit – 2013-07-05 13:38:14
自举3
<div class="paragraphs">
<div class="row">
<div class="col-md-4">
<div class="content-heading clearfix media">
<h3>Experience   </h3>
<img class="pull-left" src="../site/img/success32.png"/>
</div>
<p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div>
span4未在Bootstrap 3中使用 – Acyra 2014-06-28 17:55:57
感谢您指出。答案已更新。 – 2014-08-22 15:55:07
与引导3.3.0开始,你可以使用.media-left
和.media-body
<div class="media">
<span class="media-left">
<img src="../site/img/success32.png" alt="...">
</span>
<div class="media-body">
<h3 class="media-heading">Experience</h3>
...
</div>
</div>
这是正确的做法! – 2017-03-13 02:30:11
我会用引导的网格,以达到预期的效果。 class =“img-responsive”很好地工作。喜欢的东西:
<div class="container-fluid">
<div class="row">
<div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div>
<div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div>
</div>
</div>
使用嵌套列
要嵌套使用默认网格您的内容,添加新.row并设置.COL-SM- *列内的现有.COL-SM-*柱。嵌套行应包含一组最多不超过12个的列(不要求您使用全部12个可用列)。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
这对我帮助很大。谢谢!! – Sobiaholic 2014-01-29 17:17:55
任何codepen或小提琴? – 2017-03-03 03:26:02