html – Bootstrap将图像与文本对齐

我正在尝试将左侧的图像与使用boostrap的文本对齐,并且当在移动设备上查看页面时,图像将以文本的顶部为中心！

<div class="container">
<div class="row">
    <h1>About Me</h1>
    </class>
     <div class="col-md-4">
     <div class="imgAbt">
        <img  width="220" height="220" src="img/me.jpg">
     </div>
     </div>
    <div class="col-md-8"><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 class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="220" height="220" src="img/me.jpg" />
            </div>
        </div>
        <div class="col-md-8">
            <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 class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-md-12">
            <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>