Question

当我需要滚动页面时，我的bootstrap navbar-bottom涵盖了内容。我已经尝试将填充底部设置为65px的身体，但这没有帮助。

我的HTML

<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li>
        </ul>
    </div> <!-- End container -->
</nav>

我的CSS

body { 
    padding-bottom: 65px;
    padding-top: 65px; 
}

请有人帮帮我：D先谢谢。

Answer 1

将下边距添加到HTML而不是填充到正文。这将阻止页脚在滚动到页面结尾时覆盖内容。如果您根本不想要覆盖页脚，那么您将不得不使用其他方法而不是固定位置。

html { margin-bottom: 65px }

jsFiddle：https://jsfiddle.net/azizn/b7Lq56kt/

html {margin-bottom: 65px}

p {padding:2em; border: 1px dashed #CCC}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid">
  <div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
    <p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
    <p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
    <p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
    <p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
  </div>
</div>

<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li>
        </ul>
    </div> <!-- End container -->
</nav>

Answer 2

现有的答案不起作用，但它很接近。不是将边距添加到html元素或body元素（包括页脚和重叠内容），而是必须将边距添加到包含内容的元素，与页脚处于同一级别; .main-content div。

.main-content {margin-bottom: 65px}

p {padding:2em; border: 1px dashed #CCC}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid main-content">
  <div class="container">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
    <p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
    <p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
    <p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
    <p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
  </div>
</div>

<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></a></li>
        </ul>
    </div> <!-- End container -->
</nav>

Answer 3

<div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
         ...
    </nav>
</div>

.container {
    padding-top: 65px;
}

使用.fixed-bottom .container将带有类<div>的导航包裹起来，并给父<div> .padding-top。

Bootstrap navbar-fixed-bottom涵盖内容

3 个答案: