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

Question

我有一个带有视差滚动效果的 Bootstrap 网站。我喜欢它的外观，除了在小屏幕上无法对齐。 “文字覆盖”部分不会随着内容而延长。换句话说， Bootstrap 功能堆叠，而视差部分不会垂直延伸以容纳堆叠的内容。我怎样才能解决这个问题？ :( 该网站是实时的，因此您可以查看... 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 列对齐来使用列系统本身解决这个问题？或许？我简单地尝试了一下，它没有给我想要的结果，我取消了尝试并选择了 table - 我觉得这是作弊的解决方案......