我想将左侧的图像与使用boostrap的文本对齐，并且在移动设备上查看页面时，图像将变为居中置于文本顶部！Bootstrap将图像与文字对齐

<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

2014-03-25 rikket

什么是那些” .span 4" 和 “8跨度” 类名在那里做什么？并没有标签 – ravb79

@ ravb79，我的坏它是我试过的旧代码。更新 – rikket

Demo Fiddle

你有两个选择，要么纠正你的标记，以便它使用正确的元素，并利用引导网格系统：

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

来源

2014-03-25 16:39:42 SW4

使用电网系统自举的，更多信息here

例如

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

以这种方式时，页面会缩小第二个div（文本）

将第一（图像）下找到

来源

2014-03-25 16:15:23 WhiteLine

<div class="container"> 
      <h1>About me</h1> 
     <div class="row"> 
     <div class="pull-left "> 
      <img src="http://lorempixel.com/200/200" class="col-lg-3" class="img- responsive" alt="Responsive image"> 
       <p class="col-md-4">Lots of text here... </p> 
       </div> 

      </div> 
     </div> 
    </div>

来源

2014-09-17 01:55:58

我认为这是有帮助的，你

<div class="container"> 
     <div class="page-header"> 
       <h1>About Me</h1> 
      </div><!--END page-header--> 
     <div class="row" id="features"> 
       <div class="col-sm-6 feature"> 
         <img src="http://lorempixel.com/200/200" alt="Web Design" class="img-circle"> 
       </div><!--END feature--> 

       <div class="col-sm-6 feature"> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p> 
       </div><!--END feature--> 
      </div><!--end features--> 
    </div><!--end container-->

来源

2015-05-07 02:52:18

尝试使用.pull左到左文本对齐以及图像。

例：

<p>At the time all text elements goes here.At the time all text elements goes here. At the time all text elements goes here.<img src="images/hello-missing.jpg" class="pull-left img-responsive" style="padding:15px;" /> to uncovering the truth .</p>

来源

2016-02-15 11:36:25 Sparkz

我是一个新的蜜蜂，P。我面临同样的问题。解决方案是BS媒体对象。请参阅代码..

<div class="media"> 
    <div class="media-left media-top"> 
    <img src="something.png" alt="@l!" class="media-object" width="20" height="50"/> 
    </div> 
    <div class="media-body"> 
     <h2 class="media-heading">Beside Image</h2> 
    </div> 
</div>

来源

2017-01-24 12:30:46 user7462729

<div class="container"> 
 
    <h1>About Me</h1> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="imgAbt"> 
 
       <img width="100%" height="100%" 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>

来源

2017-09-18 09:53:08

Bootstrap将图像与文字对齐

回答

Demo Fiddle

相关问题