html – Bootstrap将图像与文本对齐

概述我正在尝试将左侧的图像与使用boostrap的文本对齐,并且当在移动设备上查看页面时,图像将以文本的顶部为中心！ <div class="container"><div class="row"> <h1>About Me</h1> </class> <div class="col-md-4"> <div class="imgAbt"> <img 我正在尝试将左侧的图像与使用boostrap的文本对齐,并且当在移动设备上查看页面时,图像将以文本的顶部为中心！

<div ><div >    <h1>About Me</h1>    </class>     <div >     <div >        <img  wIDth="220" height="220" src="img/me.jpg">     </div>     </div>    <div ><p>Lots of text here...With the four tIErs of grIDs available you're bound to run into issues where,at certain breakpoints,your columns don't clear quite right as one is taller than the other. To fix that,use a combination of a .clearfix and o</p></div></div></div>

我也尝试过.col-md-3 .col-md-pull-9以及.col-md-9 .col-md-push-3,但是我仍然无法达到预期的结果,similar to this design

解决方法 Demo Fiddle

您有两个选择,可以更正您的标记,以便它使用正确的元素并使用bootstrap网格系统：

<div >     <h1>About Me</h1>    <div >        <div >            <div >                <img wIDth="220" height="220" src="img/me.jpg" />            </div>        </div>        <div >            <p>Lots of text here...With the four tIErs of grIDs available you're bound to run into issues where,use a combination of a .clearfix and o</p>        </div>    </div></div>

或者,如果您希望文本紧密包装图像,请将您的标记更改为：

<div >    <h1>About Me</h1>    <div >        <div >            <img style='float:left;wIDth:200px;height:200px; margin-right:10px;' src="img/me.jpg" />            <p>Lots of text here...With the four tIErs of grIDs available you're bound to run into issues where,use a combination of a .clearfix and o</p>        </div>    </div>

总结

以上是内存溢出为你收集整理的html – Bootstrap将图像与文本对齐全部内容，希望文章能够帮你解决html – Bootstrap将图像与文本对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。