開關兩個引導場3

這是我的手機結構：開關兩個引導場3

A 
B 
C

我需要改變這個其他的桌面：

C 
A B

我試圖拉和推，但我無法使其工作。

我的基本代碼實際上是這樣的：

<div class="col-md-? col-xs-12 col-md-push-?"> 
    <div class="col-md-6 col-xs-12"> 
    A 
    </div> 

    <div class="col-md-6 col-xs-12"> 
    B 
    </div> 
</div> 

<div class="col-md-? col-xs-12 col-md-pull-?"> 
    C 
</div>

怎樣做這個正確的方法？

來源

2016-11-30 neon_pc

爲什麼你使用'col-md-push-6'這會在你的文本上留下空白，你可以改變你的第一個div'col-md-6改變爲col-md-12'，結果，刪除推拉 –

要使用默認網格嵌套您的內容，請在現有的.col-sm- *列中添加一個新的.row和一組.col-sm- *列。 –

你能舉個例子嗎？我不能完全理解你說的話 –

這可以用CSS來完成，使用Flexbox的和媒體查詢，如下所示：

.wrapper{ 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
} 
 
.wrapper > *{ 
 
    flex: 1 100%; 
 
} 
 
@media only screen and (min-width : 1224px) { 
 
    .ab{ 
 
     order:2; 
 
     flex: 1 auto; 
 
    } 
 
    .c{ 
 
     order:1; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="ab">A</div> 
 
    <div class="ab">B</div> 
 
    <div class="c">C</div> 
 
</div>

來源

2016-11-30 09:06:21

@neon_pc我希望，這是你正在尋找的結果，其中C只保留在桌面上的頂部。 –

非常感謝。它工作正常。 –

試試這個，檢查。願這適合你想要的。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-12 col-xs-12 " style="background-color:black;">C</div> 
 
    <div class="col-md-12 col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12" style="background-color:red;">A</div> 
 
     <div class="col-md-6 col-xs-12" style="background-color:yellow;">B</div> 
 
    </div> 
 
    </div> 
 

 

 

 

 

 

 
    
 
</body> 
 
</html>

來源

2016-11-30 09:20:49

謝謝，但這並沒有解決問題。我的興趣是塊「C」不總是處於頂部。我只需要在桌面上使用塊「C」stayis，但是在移動設備上不需要 –

@neon_pc。所以我們爲此目的使用一些js。 –

我不認爲你可以把/垂直使用引導網格系統拉。

您可能需要一些jQuery。

下面是一個簡單的測試：http://jsfiddle.net/uquf19rn/5/

HTML

<div class="container"> 
    <div class="row flexbox"> 
     <div class="col-xs-12 col-md-6 a">A</div> 
     <div class="col-xs-12 col-md-6 b">B</div> 
     <div class="col-xs-12 c">C</div> 
    </div> 
</div>

jQuery的測試

$(window).on('resize', function(){ 
     var win = $(this); //this = window 
     if (win.width() >= 992) { 
      $(".flexbox div.c").append().insertBefore(".flexbox div.a"); 
     } 
     if (win.width() < 992) { 
      $(".flexbox div.c").append().insertAfter(".flexbox div.b"); 
     } 
}).resize();

（不過 - 你可以做很多事例如側柱和自舉電網系統。。示例：http://www.bootply.com/1EcufJM6O4）

來源

2016-11-30 10:18:50

謝謝，但我需要使用最小的Javascript代碼。 –

答案中的jQuery只是一個快速測試，以表明它可以使用jQuery來完成。如果你想要一個更小的jQuery代碼，或者你想用普通的javascript（沒有jQuery）來完成它，你將不得不做一些搜索或者發佈一個新的問題，因爲我不是一個強大的JavaScript編碼器。儘可能小的JavaScript將不會是JavaScript - 就像接受的答案一樣。 –

您可以更改orde大屏幕中的列。

所以改變你的列的順序。

<!--Main Content--> 
<div class="col-lg-9 col-lg-push-3"> 
</div> 

<!--Sidebar--> 
<div class="col-lg-3 col-lg-pull-9"> 
</div>

首先顯示主要內容。首先顯示移動主要內容。

通過使用col-lg-push和col-lg-pull，我們可以對大屏幕中的列進行重新排序，並在左側顯示側欄，在右側顯示主要內容。

這是demo。

我發現另一種解決方案也使用flex。使用flex的訂單屬性更改訂單。

來源

2016-11-30 10:32:09

這是理論，但是當您嘗試使用col-lg-push-12或col-lg-pull-12做到這一點時，它會中斷，因爲我需要將代碼段 –

嘗試在代碼中切換並顯示給我。這是我的工作..可能是我會幫你。 –

您顯示的示例爲同一字段的兩個塊。我試着用兩個完整的塊。首先到底部和第二到頂部。 –

開關兩個引導場3

回答

相關問題