Bootstrap3 div位置和排序

我有四個divs，ABCD，我已經在小屏幕上堆疊在一起。但是，在中/大屏幕中，我需要一個3列布局，其中第四個div直接位於div A之下，而不是創建新行。下面是我得到的XS和SM，這是完美的：Bootstrap3 div位置和排序

但這裏是我的MD-LG獲得：

，這裏是我想要的MD-LG： enter image description here

這裏是我的代碼，這是我建立在從另一篇文章借用代碼：

<div class="container"> 
     <div class="col-md-4" style="background-color: lightblue"> 
      Content of A<br />line2 A<br />line3 A 
     </div> 
     <div class="col-md-4" style="background-color: lightcoral"> 
      Content of B<br />line2 B<br />line3 B<br />line4 B<br />line5 B 
     </div> 
     <div class="col-md-4" style="background-color: yellowgreen"> 
      Content of C - this has a variable number of lines<br />line2 C<br />line3 C<br />line4 C<br />line5 C<br />line6 C<br />line7 C<br />line8 C<br />line9 C 
     </div> 
     <div class="col-md-4" style="background-color: lightgreen"> 
      Content of D<br />line2 d<br />line3 d 
     </div>   
    </div>

非常感謝您的幫助！

上解答評論到目前爲止：

菲爾的小提琴接近，但堅持科d如在小屏幕上的第二部分。
我不想有兩個單獨的容器（一個對於小和xs可見，一個對應於md和lg），因爲實際內容具有相當數量的控件和代碼。
user1667253的解決方案是接近，但部分d的實際內容仍是C的內容的下方，如下圖所示：

再次，許多感謝的人誰可以幫忙。

來源

2013-10-04 bab

我剛剛花了，而與此不同配置玩弄（嵌套行等），我想你會必須使用jQuery和Modernizr之類的東西來根據Bootstrap 3中運行的媒體查詢來改變DOM。基本上，這意味着您將加載一個比移動設備更大的佈局，然後如果腳本檢測到屏幕是移動大小，那麼它可以改變DOM以將「D」列內容行放置在主要三列行的下方。 – PhilNicholas

這裏是JSFiddle中的兩種佈局（移動大小和標準）...標準的DOM安排：http://jsfiddle.net/9ZtcU/ 移動DOM安排：http://jsfiddle.net/WF9bh/ – PhilNicholas

感謝菲爾。您的佈局很接近，但在小版本中，D部分最終成爲第二部分而不是最後一部分。如果我理解你的第一條評論，我相信你的意思是有兩種佈局，一種可以在一種設備尺寸下顯示，另一種在另一種設備尺寸下顯示。不幸的是，我真的想避免這種情況，因爲它不是靜態內容;在每個控件中都有大量的代碼。 – bab

多的修修補補，並確認兩種佈局在他們的預期佈局模式下工作後，我已經有了一個可行的解決方案。

首先，你的佈局應具有以下HTML：

<div id="movable_rows"> 
<div class="row"> 
    <div id="lt_col" class="col-md-4"> 
     <div class="row"> 
      <div id="col_a" class="col-md-12">Col A<br>1<br>2</div> 
     </div> 

    </div> 
    <div id="mid_col" class="col-md-4">Col B<br>1<br>2<br>3<br>4</div> 
    <div id="rt_col" class="col-md-4">Col C - This has a variable number of lines<br>1<br>2<br>3<br>4<br>5<br>6<br>7</div> 
</div> 
<div id="flt_row" class="row"> 
    <div id="col_d" class="col-md-12">Col D<br>1<br>2</div> 
</div> 
</div>

然後，你需要添加下面的腳本文件頭：

<script type="text/javascript"> 
$(document).ready(function(){ 
    RearrangeRows(); 
}); 
$(window).resize(RearrangeRows); 
function RearrangeRows() 
{ 
    var col_float = $('#lt_col').css('float'); 
    if(col_float === 'left') 
    { 
     $('#flt_row').appendTo($('#lt_col')); 
    } else { 
     $('#flt_row').appendTo($('#movable_rows')); 
    } 

} 
</script>

正如你所看到的時候，該頁面加載腳本調用我寫的自定義函數，該函數檢查左列（包含示例中的「列A」內容）是否向左浮動。如果它向左漂移，那麼你正在處理標準佈局;即桌面模式或其他。否則，如果它沒有左移，那麼Bootstrap會以移動模式運行它。根據檢測到的佈局模式，它將目標DIV元素附加到兩個適當的父元素中的任何一個。當/如果調整窗口大小時，調用該函數以確保重新排列將事物保持在正確的位置。

這裏有一個working example in JSFiddle

在Firefox 17和Chrome測試30

來源

2013-10-04 22:41:55 PhilNicholas

謝謝sooo我是新來的堆棧溢出，但我想知道如何接受這個答案！ – bab

組合浮點數和位置是使最終的div出現在下面的原因。如果你清除了最後一個div的這兩個值，這應該會給出預期的結果。

http://jsfiddle.net/S8xsB/1/

<div class="container"> 
    <div class="col-md-4" style="background-color: lightblue"> 
     Content of A<br />line2 A<br />line3 A 
    </div> 
    <div class="col-md-4" style="background-color: lightcoral"> 
     Content of B<br />line2 B<br />line3 B<br />line4 B<br />line5 B 
    </div> 
    <div class="col-md-4" style="background-color: yellowgreen"> 
     Content of C - this has a variable number of lines<br />line2 C<br />line3 C<br />line4 C<br />line5 C<br />line6 C<br />line7 C<br />line8 C<br />line9 C 
    </div> 
    <div class="col-md-4 last" style="background-color: lightgreen"> 
     Content of D<br />line2 d<br />line3 d 
    </div> 
</div>

的CSS

<style> 
    .col-md-4.last{ 
     position:inherit; 
     float:inherit; 
    } 
</style>

來源

2013-10-04 02:27:45 user1667253

謝謝！這非常接近 - 現在D部分的背景延伸直到頂端，但實際的內容仍然低於C的最後一行。其他建議？ – bab

Bootstrap3 div位置和排序

回答

相關問題