Bootstrap 4使用Flex浮動

如何使用Bootstrap 4 flex Grid像這樣浮動我的佈局？我 Bootstrap 4使用Flex浮動

與Flex順序功能嘗試過，但看到我的結果和問題

<div class="row align-items-start"> 

     <div class="col-sm-8 float-left" style="background: orange;order:1"> 
       <div class="white-container pt-5 pb-5"> 
        # LEFT 1 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: pink;order:2"> 
       <div class="white-container pt-3 pb-3"> 
        # RIGHT 1 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: grey;order:4"> 
       <div class="white-container pt-3 pb-3 "> 
        # RIGHT 2 
       </div> 
      </div> 
      <div class="col-sm-8 float-left" style="background: yellow;order:3"> 
       <div class="white-container pt-5 pb-5"> 
        # LEFT 2 
       </div> 
      </div> 
      <div class="col-sm-8 float-left" style="background: yellow;order:5"> 
       <div class="white-container pt-5 pb-5"> 
        LEFT 3 
       </div> 
      </div> 
      <div class="col-sm-4 float-right" style="background: grey;order:6"> 
       <div class="white-container pt-3 pb-3"> 
        RIGHT 3 
       </div> 
      </div> 
     </div>

我解決這個問題的正確列之間的空間。我希望在放棄和使用javascript之前給予任何幫助:)

來源

2017-09-26 Alper Aydingül

這種佈局將更容易實現與兩個並排的列。

查看https://codepen.io/caleyshemc/pen/mBWWRL的工作示例。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-8"> 
     <div class="p-5" style="background: orange;"> 
     # LEFT 1 
     </div> 
     <div class="p-5" style="background: yellow;"> 
     # LEFT 2 
     </div> 
     <div class="p-5" style="background: lightgreen;"> 
     # LEFT 3 
     </div> 
    </div> 

    <div class="col-sm-4"> 
     <div class="p-3" style="background: pink;"> 
     # RIGHT 1 
     </div> 
     <div class="p-3" style="background: grey;"> 
     # RIGHT 2 
     </div> 
     <div class="p-3" style="background: lightblue;"> 
     # RIGHT 3 
     </div> 
    </div> 
    </div> 
</div>

如果你絕對必須保留項目的順序，這種佈局是不可能的Flexbox的。查看JavaScript網格佈局庫，如Masonry。

來源

2017-09-26 23:56:29 polyp

目前我使用的是相同的解決方案就像你的，但我的目標是讓獨立的JavaScript的網頁:) –

jQuery的解決方案：

var isMobileSorted = false; 

$(window).resize(function() { 
    if ($(window).width() < 768) { 
     if(!isMobileSorted) { 
      // sort mobile 
      $("#widget").insertAfter($("#pictures")); 
      $("#video").insertAfter($("#widget")); 
      $("#reviews").insertAfter($("#contact")); 
      isMobileSorted = true; 
     } 
    } else { 
     if(isMobileSorted) { 
      // resort desktop 
      $("aside").prepend($("#widget")) 
      $("#video").insertAfter($("#widget")); 
      $("#reviews").insertAfter($("#video")); 
      isMobileSorted = false; 
     } 
    } 
}).resize();

來源

2017-09-27 09:07:17

Bootstrap 4使用Flex浮動

回答

相關問題