javascript - 使用 Bootstrap 的响应式 3 列布局

Question

我正在构建一个简单的网络界面，其中包含 3 个横向列。

当移动时(比方说，最大 800 像素宽)，我希望这些列分布在屏幕的整个宽度上。它们不应出现在彼此下方，但仍会彼此相邻，非事件列的宽度为 0px，使 1 列显示为“全屏”。这样，当另一列变为事件列时，我可以创建向左/向右滑动的效果。

我现在使用 Javascript 来完成这一切，没问题，但我觉得我可以用更优化的方式来完成这件事。我也在使用 Bootstrap，所以我觉得这应该可以帮助我解决这个问题。

有什么方法可以用尽可能少的 JS 实现这个结果(1 列在 < 800 像素的屏幕上有滑动动画，3 列在更大的屏幕上)？

我希望能够仅将 JS 用于动画，将 CSS 用于所有其余部分，但目前我正在使用它来调整屏幕大小的列大小，制作动画，几乎所有的工作。

更新:我尽我最大的努力在一个简单的 JSFiddle 中解决我目前的情况。 。我的目的是让列在较小的屏幕上显示为全屏，并在宽度超过(例如)800 像素的屏幕上自动显示为 3 列布局。

这是在屏幕不够宽时在各列之间滑动的 Javascript:

//Go back, "slide" to the left
function slideBack() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) - 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

//Go forward, "slide" to the right
function slideForward() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) + 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

Answer 1

那么你可以使用nth-child 选择器

<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>

小型设备的 css

.slide {
  width: 0;
}

.slide:nth-child(1) {
  width: 100%;
}

在上述情况下，第一张幻灯片的宽度为 100%，而其余幻灯片则没有宽度。您也可以使用 display:none 而不是零宽度。

使用 javascript 连接触摸事件并添加适当的类以在幻灯片之间切换。