Question

所以我试图在我的网站上找到一个底部导航栏，不断出现的问题是它们是页面底部的一些填充物，我似乎无法删除。您可以在下面看到导航栏的代码。

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title> Falke Homepage </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- Loading Custom Stylesheet-->
    <link href="css/Stylesheet for Homepage.css" rel="stylesheet">
</head>     
<body>
    <!-- Static Navbar For Top of Homepage-->
    <div class="navbar navbar-default navbar-static-top" role ="navigation">
        <div class="container-fluid">
            <div class="nav navbar-nav">
                <ul class = "nav">
                    <li><img src="img/Falke Logo.png" class="img-responsive" alt="Responsive image"></li>
                </ul>
            </div>  
                <ul class = "nav navbar-nav navbar-right">
                    <div class='btn-group'>
                        <li><button class="btn navbar-btn btn-info">Sign In</button></li> 
                    </div>
                    <div class='btn-group'>
                        <li><button class="btn navbar-btn btn-success">Register</button></li>
                    </div>
                </ul>
            </div>                  
    </div><!-- end of navbar-->

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="img/NYC Skyline.jpg" class="img-responsive" alt="Responsive image">
            </div><!-- pic of NYC -->
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="jumbotron">
                     <h1>Welcome to Falke!</h1>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                     <a href="#" class="btn btn-large btn-info">Get Started</a>
                </div><!-- end of jumbotron-->

    </div>
        </div>
    </div>

    <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6"><img src ="img/Biker.jpg" class="img-responsive" alt="Responsive image"></div>
                <div class="col-xs-6"><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p></div>
            </div>
    </div><!--  End of Biker image and Text container -->

    <!-- Static Navbar For Bottom of Homepage-->




    <div class="navbar navbar-default navbar-static-bottom footer" role ="navigation">
    <div class="container-fluid">
                <ul class = "nav navbar-nav">
                    <li><img src="img/Facebook Flat.png" class='footer-img' alt="Responsive image" ></li>
                    <li><img src="img/Twitter Flat.png"  class='footer-img'alt="Responsive image"> </li>
                    <li><img src="img/YouTube Flat.png" class="footer-img" alt="Responsive image"> </li>
                    <li><img src="img/Google Plus Flat.png" class='footer-img' alt="Responsive image"> </li>
                    <li><img src="img/Instagram Flat.png" class='footer-img' alt="Responsive image"> </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <div class='btn-group'>
                        <button class="btn navbar-btn btn-link">About Us</button>
                    </div>
                </ul>
            </div>
    </div><!-- end of navbar for bottom-->


    <!-- Load JS here for greater good =============================-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
</body>
</html>

您可以在此处查看问题 Padding Issue

我使用Bootstrap 3感谢您的帮助。

Answer 1

您的About us高68 px，而页脚只有53px。减少第4729行flat-ui.css中.navbar-nav > li > a上的填充。接下来，删除第4594行的flat-ui.css和第3649行的bootstrap.css中的margin-bottom。

如何在Twitter Bootstrap中删除导航栏底部填充

1 个答案: