Question

目前在我的网站上，我使用的引导导航栏始终位于屏幕顶部（即使滚动时也是如此）。

在它下面我有一个图像轮播，通过给页面顶部填充将其推到下面，将其推到它下面。

问题在于，这主要是猜测，因为导航栏的高度随着字体大小而变化，在我的高字体大小上它与旋转木马重叠，但是在较小的字体大小上它很好。

是否有办法让旋转木马直接位于导航栏下方而没有间隙，如果导航栏由于更大的字体而变得更大以将其推下来更多？我从不希望有重叠或差距。

普通导航栏不是问题，因为元素只会在彼此之后，但由于这是导航栏固定顶部，因此它有点笨拙。

网址：http://www.gamingonlinux.com/

代码：

<!-- navbar -->
<div class="col-md-12">
    <div class="container">
        <div class="navbar navbar-fixed-top {:inverse}" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
              </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/" style="padding-top: 0px; padding-bottom: 0px;"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/donate/">Donate</a></li>
                    <li><a href="/sales/">Sales</a></li>
                    <li><a href="/contact-us/">Submit Tip</a></li>
                    <li><a href="/crowdfunding/">Wiki</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forum <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/forum/">Forum</a></li>
                            <li><a href="/community/">Community Page</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            {:user_menu}
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
                    <input type="hidden" name="module" value="search">
                    <input type="text" class="form-control" name="q" placeholder="Search Articles">
                    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
                </form></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="col-md-12">
            <div class="row add-bottom-margin">
                <!-- image carousel -->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                       {:carousel_list}
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                      </a>
                </div><!-- /.carousel -->
            </div>
        </div>

Answer 1

我在其他地方找到答案，而不是强迫特定的差距，用js计算并设置它：

jQuery(document).ready(function () {
    $('.contentwrap').css({
        'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
    });
    $(window).resize(function () {
        $('.contentwrap').css({
            'margin-top': (($('.navbar-fixed-top').height()) + 0) + 'px'
        });
    });
});

在导航栏下方直接制作bootstrap轮播

1 个答案: