このようにブートストラップを使用してdivグループを作成したいとします。divをページサイズ変更時の位置
-------------------------------
| |
| |first div | | main | |
| | div | |
| |second div| | | |
| |
-------------------------------
だから、小さい画面では次のようになります：
------------------
| |
| |first div | |
| |
| | main | |
| | div | |
| | | |
| |
| |second div| |
| |
------------------
それは可能ですか？
はいの場合は、私を案内してください。
これを使用してみてください：
.col {
float: left;
margin: 20px;
padding-bottom: 100px;
margin-bottom: -100px;
}
.div-1{
background: #ccc;
}
.div-2{
background: #ddd;
}
.div-3{
background: #eee;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12 div-1 col">First Div</div>
<div class="col-md-8 col-xs-12 div-2 col">Main Div</div>
<div class="col-md-3 col-xs-12 div-3 col">Second Div</div>
</div>
</div>有用かどうかを確認する –
厳密な位置指定の順序では、POSITION：ABSOLUTEを使用して、TOP LEFT WIDTH HEIGHT属性を定義する必要があります。次に、CSSメディアクエリで、必要に応じてTOP LEFT WIDTH HEIGHTの位置を変更します。
最初に作成するにはどうしたらいいですか？私は2つの.col-md-3が必要です。 – Conor
私が理解しているように、このような方向を変えたいのであれば、JavaScriptで少し難しいかもしれません。
だから私はそれをブートストラップに変換すると、そうそうです。
-------------------------------
| |
| |first div | | main | |
| | div | |
| |second div| | | |
| |
-------------------------------
<div class="container">
<div class="row">
<div class="col-lg-8 col-xs-12">
<div class="row">
<div class="col-xs-12">
first div
</div>
</div>
<div class="row">
<div class="col-xs-12">
second div
</div>
</div>
</div>
<div class="col-lg-4 col-xs-12">
main div
</div>
</div>
</div>
モバイルでは、次のようになります。
------------------
| |
| |first div | |
| |
| |second div| |
| |
| | main | |
| | div | |
| | | |
| |
| |
| |
------------------
ブートストラップもcol-pull提供し、col-pushそれだけで何とかによる最初のdivは、メインのdivと同じ高さを持っていない限り、このケースではありません同じ行の項目に適用され、我々はできますこれら2つを1つの行にまとめます。
私は適切な解決策を見つけるとすぐに戻ってくるましょう:)
media'クエリ@ 'を利用します。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp – Sankar