応答性が高く、右側のサイドバーがあるシンプルなWebサイトを作成しようとしています。
できれば、右側のサイドバーをモバイルデバイスの上部に積み重ねてください。
これが私のコードです:http://jsfiddle.net/wyLTA/embedded/result/
左に引っ掛からないように全幅にするために何を変更する必要がありますか?
応答性が高く、右側のサイドバーがあるシンプルなWebサイトを作成しようとしています。
できれば、右側のサイドバーをモバイルデバイスの上部に積み重ねてください。
これが私のコードです:http://jsfiddle.net/wyLTA/embedded/result/
左に引っ掛からないように全幅にするために何を変更する必要がありますか?
<div class="span3" id="sidebar"> ... </div>
.span6と次のcss/jQueryの前に追加します。
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" id="sidebar">sidebar</div>
<div class="span6">
<div class="hero-unit">
...
CSS:
#sidebar{
background-color:#555555;
position:absolute;
right:0px;
margin-bottom:9px;
}
jQuery:
function sidebar() {
var windowwidth=$(window).width();
if(windowwidth>=768) $("#sidebar").css('position','absolute')
else $("#sidebar").css('position','relative')
}
$(document).ready(sidebar);
$(window).resize(sidebar);
http://jsfiddle.net/baptme/wyLTA/8/
またはメディアクエリを使用
CSS:
#sidebar{
background-color:#555555;
right:0px;
margin-bottom:9px;
}
@media (max-width: 767px) {
#sidebar{
position:relative;
}
}
@media (min-width: 768px) {
#sidebar{
position:absolute;
}
}
ちょうどそれを理解し、からに移動してトリックを行いましたspan6
。span9
コード: http: //jsfiddle.net/wyLTA/9/embedded/result/
[サイドバーを下ではなく上に積み上げる方法を知りたいのですが]