0

我正在尝试使用 Bootstrap 词缀在内容区域的顶部并排创建两个“粘性”块，但它们的行为不符合预期。它们总是相互重叠和/或内容重叠，或者不填充它们的父级。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
            <text id="menu"></text>
        </div>
        <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 col-lg-push-9 col-md-push-9 col-sm-push-9 col-xs-push-9" id="sticky2" data-spy="affix">
                    <text id="right"></text>
                </div>
                <div class="col-lg-7 col-md-7 col-sm-9 col-xs-9" id="sticky1" data-spy="affix">
                     <h1><span class="hidden-lg hidden-md hidden-sm">XS</span><span class="hidden-lg hidden-md hidden-xs">SM</span><span class="hidden-lg hidden-sm hidden-xs">MD</span><span class="hidden-md hidden-sm hidden-xs">LG</span></h1>
                    <text id="top"></text>
                </div>
                <div class="row">
                    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                        <div class="row contentRow" id="contentRow">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background-color: yellow;">
                                <text id="content"></text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

看看这个小提琴：http: //jsfiddle.net/halvorsen/1zv6gqwu/42/

关于如何解决这个问题的任何建议？

我是否必须使用 JavaScript 设置“粘性”块的大小？

4

0 回答 0