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,但我还是没能达到预期的效果,类似这样的设计

Answer 1

演示小提琴

您有两种选择,要么更正标记,以便使用正确的元素并使用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, 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>

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

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

Answer 2

使用网格系统的自举这里有更多信息

例如

<div class="row">
  <div class="col-md-4">here img</div>
  <div class="col-md-4">here text</div>
</div>

这样，当页面缩小时，将在第一个（图像）下找到第二个 div（文本）