html – Bootstrap将图像与文本对齐

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/html/225064.html

猜你在找的HTML相关文章