0

応答性が高く、右側のサイドバーがあるシンプルなWebサイトを作成しようとしています。

できれば、右側のサイドバーをモバイルデバイスの上部に積み重ねてください。

これが私のコードです:http://jsfiddle.net/wyLTA/embedded/result/

左に引っ掛からないように全幅にするために何を変更する必要がありますか?

4

2 に答える 2

5

<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;
  }
}

http://jsfiddle.net/wyLTA/11/ </ p>

于 2012-06-27T12:07:39.107 に答える
0

ちょうどそれを理解し、からに移動してトリックを行いましたspan6span9

コード: http: //jsfiddle.net/wyLTA/9/embedded/result/

[サイドバーを下ではなく上に積み上げる方法を知りたいのですが]

于 2012-06-27T12:30:06.253 に答える