如何更改小屏幕的Bootstrap默認div位置？
[英]How to change the Bootstrap default div position for small screens?
問題描述
我正在使用Bootstrap。 當屏幕重新調整為sm/xs時，我想更改默認div位置（當您縮小屏幕/窗口時，默認位置是紫色div變為紅色）。 基本上，我想得到下圖所示的內容。
我試圖通過push和pull更改其位置，但是它不起作用。
謝謝
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="Keywords" content=""> <meta name="robots" content="index,follow"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div style="background-color:#8000ff; height:200px" class="col-md-8 col-sm-12">Example1</div> <div style="background-color:red; height:200px" class="col-md-4 col-sm-12">Example2</div> </div> </div> </body> </html>
1 個解決方案
解決方案1
2 已采納 2016-09-02 11:29:54
您可以使用.col-md-push-*和.col-md-pull-*修飾符類輕松更改網格列的順序。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="Keywords" content=""> <meta name="robots" content="index,follow"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div style="background-color:red; height:200px" class="col-sm-12 col-md-4 col-md-push-8">Example2</div> <div style="background-color:#8000ff; height:200px" class="col-sm-12 col-md-8 col-md-pull-4 ">Example1</div> </div> </div> </body> </html>
如何使用bootstrap4在小屏幕上將div從div內部移動到其右下
[英]How to move a div from inside a div to right under it on small screens using bootstrap4
Bootstrap：如何在帶有或不帶有媒體查詢的小屏幕上創建響應div列？
[英]Bootstrap : How do i create responsive div columns in the small screens with or without media queries?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.