Geek Answers Handbook

Why is my title covered in the Nav panel? bootstrap

I plan using boostrap and wonder why, when I use the built-in classes, my header is still cropped. I can use css to move it, but I would think that I would not need to add my own CSS when using bootstrap header classes.

This is a generated page, I am using Asp.net MVC 5.1 from VS 2013. So much on the main page.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio - My ASP.NET Application</title> <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/modernizr-2.6.2.js"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li> <a href="/home/index">Home</a> </li> <li> <a href="#">Resume</a> </li> <li> <a href="/home/portfolio">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> </div> </div> <div class="container body-content"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Portfolio</h1> </div> </div> </div> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text">&copy; 2014 - My ASP.NET Application</p> </div> </div> </div> <script src="/Scripts/jquery-2.1.0.min.js"></script> <script src="/Scripts/bootstrap.min.js"></script> <!-- Visual Studio Browser Link --> <script type="application/json" id="__browserLink_initializationData"> {"appName":"Firefox","requestId":"c8d12fe59c90426f9175a363b9a06484"} </script> <script type="text/javascript" src="http://localhost:58343/af7b5f6142444a738445c2a2e5c5a6d7/browserLink" async="async"></script> <!-- End Browser Link --> </body> </html>

enter image description here

+7
css twitter-bootstrap asp.net-mvc
source share
4 answers

I believe, because there is a navbar-fixed-top class in the Nav panel that makes Navbar a fixed position in CSS, so just delete this class and it will not hide your title

Hope he fixed it for you.

+4
source share

When using the fixed top navigation bar, you need to add a manual padding.

According to the bootstrap documentation,

Housing required

A fixed navbar will overlay on your other content unless you add an addition to the body tag. Try your own values ​​or use our snippet below. Tip. By default, the navigation bar is 50 pixels high.

 body { padding-top: 70px; }

Be sure to include this after the main Bootstrap CSS.

Source: http://getbootstrap.com/components/#navbar-fixed-top

+9
source share

if you have a double container, delete what it will look like:

 <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Portfolio</h1> </div> </div>

not

  <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Portfolio</h1> </div> </div> </div>

Differences between container, string and spacing in Bootstrap

Hope this helps!

0
source share

The easiest way is to add a bunch of <br> until the title is blocked. Or you can add padding to the top of the container. Usually your navigation bar is about 50px high. You choose how many indents you want to give.

0
source share

More articles:


All Articles