我想將左側的圖像與使用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

相關問題