Bootstrap交替佈局堆疊在手機中

我在Bootstrap中有一個基本的響應式佈局，圖像位於文本塊旁邊。在第一行中，圖像位於左側，第二行中圖像位於右側。這重複了頁面。Bootstrap交替佈局堆疊在手機中

問題：當用戶在移動設備上時，圖像變爲全寬（因爲它們應該），但是對於圖像與右側對齊的任何行，它都位於文本的下方而不是上方（請參閱代碼如下）。我明白爲什麼會發生這種情況，但是我想知道bootstrap中是否有一個類可以解決這個問題？它一定是相當普遍的，那麼這裏提出的最佳實踐是什麼？

<div class="container"> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive"/> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div>  
    </div> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive" /> 
      </div>  
    </div> 
</div>

任何幫助，將不勝感激。

來源

2014-08-28 Tom

你能爲此添加任何小提琴...所以我可以幫助你。 – 2014-08-28 05:06:59

簡短說明：基於引導移動的第一個概念，只要不想更改列規格，就不需要指定col-md樣式。 – 2014-08-28 07:31:17

你正在尋找的東西像嵌套列：這裏是DOC：http://getbootstrap.com/css/#grid-nesting

Bootply：http://www.bootply.com/qsdH9jr70F

看此代碼：而專門在col-sm-push-6和col-sm-pull-6

HTML：

<div class="container"> 
    <div class="row feature"> 
      <div class="col-sm-6 col-md-6"> 
      <img src="url" class="img-responsive"> 
      </div> 
      <div class="col-sm-6 col-md-6"> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div>  
    </div> 
    <div class="row feature">  
      <div class="col-sm-push-6 col-sm-6 col-md-6"> <!-- HERE --> 
      <img src="url" class="img-responsive"> 
      </div> 
      <div class="col-sm-6 col-sm-pull-6 col-md-6"> <!-- HERE --> 
      <h1>title</h1> 
      <h3>subtitle</h3> 
      <p>body</p> 
      </div> 
    </div> 
</div>

來源

2014-08-28 07:20:53 pbenard

感謝TheLittlePig - 推拉正是我一直在尋找的東西。 – Tom 2014-09-01 23:10:50

Bootstrap交替佈局堆疊在手機中

回答

相關問題