这让我很生气：我有一点点jquery横向滑动三个div。
编辑3： Live demo; complete website showing how I want it to work .. 直到我的价格低于775px。请调整窗口大小以查看我的意思。
编辑，受欢迎的需求。我想要的是： 在小屏幕上，比如从700和下来。我想要一个面板填满屏幕。一次。
2ND编辑： 在700px以上可以正常工作。在那之下;我希望屏幕一次只显示一个面板，当需要时（点击当前面板），下一个面板将向侧面滑动。即没有堆叠的列，这是经典的响应式设计。请看小提琴。在您最小化浏览器窗口或使用移动设备之前，这一切都很好。
我将panel1和panel2定义为fixed width，并使用css calc将第三个面板保持为100％减去panel1（200px）和panel2（200px）：(calc 100% - 400px)
这很好用，直到我进入小屏幕。然后它变得混乱： 面板垂直堆叠在一起（我想隐藏面板不活动），并且由于固定的宽度，我“看到”右边的一小块压扁面板。理想情况下，我希望每个面板100％填充小屏幕。
我需要帮助的是：
我必须
var margins = {
panel1: 0,
panel2: -200,
panel3: -400,
}
..因此能够做我的css计算（100％ - 20％）或类似的东西。
所有指针都非常感激。
答案 0 :(得分：1)
您可以在此处详细了解TB3网格：http://getbootstrap.com/css/#grid
另请阅读：Twitter's Bootstrap mobile: more columns和Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
<击> 您将需要以下内容：
<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像素以下，您的列将堆叠（100％屏幕宽度），由col-sm-4引起。在767像素以上，您可以使用媒体查询为您的面板提供固定的宽度：
@media (min-width: 768px)
{
.panel {width:200px}
}
更新（根据评论）。
<强> 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()来触发此次重新加载，请注意某些浏览器会触发此操作两次，请参阅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>
javascript（新）
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（新!!）
答案 1 :(得分：0)
根据我对您的问题的理解，您遇到了panel3的问题。您可以使用以避免此类烦恼。检查live demo
.panel1, .panel2, .panel3
{
float: left;
height: 800px;
padding: 5px ;
overflow: none;
}