如何移动引导列？

Posted 2023-05-08

【中文标题】如何移动引导列？

【英文标题】：How to move bootstrap columns?

【发布时间】：2015-06-08 10:14:39

【问题描述】：

我正在使用引导程序，我需要移动列。 我的页面由 4 列整页高度（col-md-3）组成；我也在使用 Fullpage.js。 我希望当用户滚动到包含列的部分时，用户看不到这些列，但这些列从右侧（屏幕外）出现在左侧并填充页面。

这是专栏的代码

<div class="section" id="section1" style="margin:0px; padding:0px; margin:0px; padding:0px;">
        <div id="slogan" style="width:100%; text-align:center">
            <img src="images/slogan.png" style="width:50%; min-width: 530px;" />
        </div>
        <div style="width:100%">
            <div id="aa" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#FFF5E9;">
                <img src="images/aa.png" style="width:60%;" />
                <img src="images/bb.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="cc" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#e3d4c1;">
                <img src="images/cc.png" style="width:60%" />
                <img src="images/vv.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="dd" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#FFF5E9;">
                <img src="images/gg.png" style="width:60%;" />
                <img src="images/hh.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="rr" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#e3d4c1;">
                <img src="images/rr.png" style="width:60%;" />
                <img src="images/yy.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage"     style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>
        </div>

现在列是可见的，但我希望从右侧（屏幕外）到达。

谢谢！！

【问题讨论】：

向我们展示您的代码 ....

在谈论轮播吗？

【参考方案1】：

我认为您希望为特定部分的内容制作动画。

在这种情况下，您只需使用谷歌搜索即可使用许多插件。

我找到了一个可以满足你的：http://git.blivesta.com/animsition/

说明非常简单。如果您对此有任何问题，请告诉我。

否则您也可以查看已回答的类似问题：Animate bootstrap columns