i trying develope website mobile devices.
i testing on iphone , ipad @ moment have issue ipad.
i have following code:
<body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> home</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> </ul> </li> </ul> <form class="navbar-search pull-right" action=""> <input type="text" class="search-query span2" placeholder="search"> </form> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div><!-- /.navbar-inner --> </div><!-- /.navbar --> <div class="container"> <div class="row-fluid"> test </div> on iphone text "test" appears correctly positioned under navbar in both portrait , landscape mode. on ipad in horizontal mode text sits behind navbar.
any ideas how can fix this?
according bootstrap docs when use 'navbar-fixed-top'..
"add .navbar-fixed-top , remember account hidden area underneath adding @ least 40px padding . sure add after core bootstrap css , before optional responsive css."
so can either include bootstrap-responsive.css after body padding css on example (http://twitter.github.io/bootstrap/examples/starter-template.html)
body {padding-top:40px} or use @media query adjust body smaller screens (phone,tablet)
@media (min-width: 979px) { body { margin-top:40px; } } demo using @media query: http://bootply.com/60781
Comments
Post a Comment