TB3 グリッドの詳細については、http: //getbootstrap.com/css/#gridを参照してください。
また読む:TwitterのBootstrapモバイル:より多くの列とTwitterのBootstrap 3グリッド、ブレークポイントの変更とパディングの削除
次のようなものが必要になります。
<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>
<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>
<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>
768 ピクセルより下では、col-sm-4
. 767 ピクセルより上では、メディア クエリを使用してパネルに固定幅を与えることができます。
@media (min-width: 768px)
{
.panel {width:200px}
}
以下の(コメントに基づく)更新。
これを試してください:http://bootply.com/73541
CSS
@media (max-width: 767px)
{
#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}
@media (min-width: 768px)
{
#menu {visibility:hidden}
}
JavaScript
function showandhide(show)
{
$('.panel').hide();
$('#' + show).css('visibility','visible').slideDown("slow");
}
$('.panellink').click(function()
{
showandhide($(this).attr('rel'))
return false;
} );
html
<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>
<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>
<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>
応答に基づいて2 を更新します。
1) 767 ピクセルを超えると、すべてのパネルが私の例に表示されます。小さいサイズから大きいサイズに変更する場合は、ページをリロードする必要があります。$(window).resize()
一部のブラウザがこれを 2 回起動することに注意してこのリロードをトリガーすることもできます。解決策についてはhttps://stackoverflow.com/a/4298653/1596547を参照してください。
2)「横にスライドする」ために、これを書き直します:http://jsfiddle.net/ax4AC/2/:
$('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});
html (新規)
<div id="menu" class="row">
<div class="col-12">
<a class="panellink" rel="panel1" href="">panel 1</a> |
<a class="panellink" rel="panel2" href="">panel 2</a> |
<a class="panellink" rel="panel3" href="">panel 3</a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>
<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>
<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>
ジャバスクリプト(新)
function showandhide(show)
{
// source: http://jsfiddle.net/ax4AC/2/
$('.panel').css('margin-left','-260px').hide();
$('#' + show).css('visibility','visible');
$('#' + show).show();
$('#' + show).animate({
'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
opacity: "show"
});
//.slideDown("slow");
}
$('.panellink').click(function()
{
showandhide($(this).attr('rel'))
return false;
} );
//source timeout: https://stackoverflow.com/a/4298653/1596547
var id;
$(window).resize(function()
{
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing()
{
if($(window).width()>=768)
{
$('.panel').css('display','block');
$('.panel').css('visibility','visible');
$('.panel').css('margin-left',0);
}
}
css (新規)
@media (max-width: 767px)
{
.panel{
margin-left: -260px;
}
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}
@media (min-width: 768px)
{
#menu {visibility:hidden}
.panel {display:block; visibility:visible; margin-left:0}
}
参照: http://bootply.com/73715 (new!!)