Question

129

How To Remove Default Padding From Bootstrap Nav Bar

rated 0 times [ 133] [ 4] / answers: 1 / hits: 23290 / 10 Years ago, tue, november 4, 2014, 12:00:00

Bootstrap JS/CSS is appending transparent space to the bottom of a NavBar inside a <td> in my home page. This shows a live preview of the issue I'm having with the default bootstrap configuration of NavBars.

Here is a complete, (minus the inclusion of the bootstrap files) and minimal example of the code I wrote to create the NavBar.

<html>

<body>

<table align="center" border="1px"><tr>

<td>

<!-- Navigation -->

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse"

                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="index.html">Home</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">

                <li>

                    <a href="about.html">About Us</a>

                </li>

                <li>

                    <a href="contact.html">Contact Us</a>

                </li>

                <form class="navbar-form navbar-right" role="search">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search">

                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>

                </form>

            </ul>

        </div>

        <!-- /.navbar-collapse -->

    </div>

    <!-- /.container -->

</nav>

</td></tr>

</table>

</html>