三個面板的自舉網格布局
[英]Bootstrap grid layout for three panels
問題描述
我有三個面板，看起來應該像台式機一樣
______________ ___
| | | |
| | | |
| 1 | | 3 |
|______________| | |
______________ | |
| | | |
| | | |
| 2 | | |
| | | |
|______________| |___|
但是在小型設備上，面板應該井然有序
____
| 1 |
|____|
____
| 3 |
|____|
____
| 2 |
|____|
我試過了
<div class="col-md-9></div>
<div class="col-md-3></div>
<div class="col-md-9></div>
然后panel2下降，並嘗試
<div class="col-md-9>
<div></div>
<div></div>
<div>
<div class="col-md-9></div>
在小型設備上的順序錯誤。
謝謝
2 個解決方案
解決方案1
1 2014-11-13 06:09:36
請嘗試以下操作：
<body>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-md-9 col-xs-9" style="background-color: green;">111111</div>
<div class="col-md-3 col-xs-9" style="background-color: yellow;">333333</div>
<div class="col-md-9 col-xs-9" style="background-color: brown;">2222222</div>
</div>
</div>
</body>
解決方案2
0 已采納 2014-11-14 03:12:23
解決方案是為大型設備添加float：right樣式。
@media (min-width: 768px) {
.sm-pull-right{
float:right;
}
}
<body>
<div class="container-fluid">
<br />
<div class="row">
<div class="col-sm-9" style="background-color: green;">111111</div>
<div class="col-sm-3 sm-pull-right" style="background-color: yellow;height:220px;">333333</div>
<div class="col-sm-9" style="background-color: brown;">2222222</div>
</div>
</div>
引導面板+用於評論布局的媒體布局
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.