解决小屏幕上重叠的视差滚动功能

Question

我有一个带有视差滚动效果的引导网站。我喜欢它的外观，除了在一个小屏幕上它无法对齐。 “文本结束”部分不会随着它的内容而延长。换句话说，引导功能堆叠，而视差部分不会垂直延伸以容纳堆叠的内容。我怎样才能解决这个问题？ :( 该网站已上线，因此您可以查看... http://www.adeninedesign.net/

Answer 1

我似乎已经解决了这个问题，方法是使用表格来对齐一些内容，以防止它堆积太多。 我一直在使用子行（子元素）... 我什至不确定这是否允许。

像这样：

    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10 text-left">
            <div class="row">
                <div class="col-sm-4">Content</div>
                <div class="col-sm-4">Content</div>
                <div class="col-sm-4">Content</div>
            </div>
        </div>
        <div class="col-sm-1"></div>
    </div>

相反，这是我的解决方案：

    <div class="row">
        <div class="col-sm-1"></div>
            <div class="col-sm-10 text-left">
                <table>
                    <tr>
                        <td>Content</td>
                        <td>Content</td>
                        <td>Content</td>
                    </tr>
                </table>
        </div>
        <div class="col-sm-1"></div>
    </div>

但是，我很确定我可以通过分配 xs 列对齐来使用列系统本身解决这个问题？也许？我简单地尝试了一下，它没有给我想要的结果，我把尝试装在了罐子里，然后用桌子去了——我觉得这是骗子的解决方案......