Question

所以我的网站有一个90 px的固定标题，我需要实现另一个位于col-md-8内的固定div，当滚动时它保持在固定标题下面。我使用了词缀，它工作正常，固定部分，然而，宽度都搞砸了。如果我将100％的宽度添加到div然后我检查它，div容器STARTS从col-md-8所在的位置，但是它跨越到页面本身的末尾而不是列的末尾。我在下面发布了我目前的代码。有关如何使固定div保留在引导列内并使用相同宽度的列的任何想法？

<div class="row">
     <div class="col-md-8">
          <div class="row">
               <div class="col-md-12">
                    <div class="affix" data-spy="affix" style="z-index: 1">
                         <div>
                              <img src="" class="img-responsive"/>
                         </div>
                         <div>
                              <img src="" class="img-responsive"/>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

这是我想要的布局：http://imgur.com/a/73HjK

欢迎任何信息和帮助！

编辑：我有一个有效的解决方案（见下文），但是，我相信有人会为我的问题找到更好的版本/解决方案。

<script>
        $(document).ready(setAffixWith);
        $(window).resize(setAffixWith);

        function setAffixWith() {
            var colWidth = $('.col-md-8').width();
            $('.affix').css('width', '' + colWidth + '');
        }
    </script>

    <div class="row">
        <div class="col-md-8">
            <div class="affix" data-spy="affix" data-offset-top="0" style="z-index: 1">
                <div class="fixed-toggle">
                    <div class="col-xs-6">
                        <img src="" class="img-responsive"/>
                    </div>
                    <div class="col-xs-6">
                        <img src="" class="img-responsive"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

.fixed-toggle {
  width: 100%;
  height: 60px;
  background-color: red;
  margin-top: -20px;
}

列中的Bootstrap词缀

0 个答案: