html - Bootstrap 将图像与文本对齐

Question

我正在尝试使用 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

Answer 1

您有两个选择，要么更正您的标记，使其使用正确的元素，要么利用 Bootstrap 网格系统:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

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

或者，如果您希望文本紧密包裹图像，请将您的标记更改为:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

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