javascript - Why is the body being hidden behind navbar when i use navbar-fixed-top -


i using navbar class navigation menu. when use class navbar-fixed-top, content body being hidden behind navbar. can body tell me why happens?

below code i've been working on.

<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>janasena party</title>      <!-- bootstrap -->     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">      </head>     <body style = "background-color: lightgrey;">         <div class = "navbar navbar-default navbar-fixed-top">             <div class = "container">                 <div class = "navbar-header ">                     <a href = "#" class = "navbar-brand pull-left">brand</a>                     <button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navheadercollapse">                         <span class = "icon-bar"></span>                         <span class = "icon-bar"></span>                         <span class = "icon-bar"></span>                         <span class = "icon-bar"></span>                     </button>                 </div>                 <div class = "collapse navbar-collapse navheadercollapse pull-right">                     <ul class = "nav navbar-nav">                         <li>                             <a href = "#">link1</a>                         </li>                         <li>                             <a href = "#"> link2</a>                         </li>                         <li>                             <a href="#" class = "active">link3</a>                         </li>                         <li>                             <a href="#">link4</a>                         </li>                         <li>                             <button class = "btn navbar-btn btn-danger dropdown-toggle" data-toggle = "dropdown">dropdown<span class =  "caret"></span></button>                             <ul class = "dropdown-menu">                                 <li>                                     <a href="#">facebook</a>                                 </li>                                 <li>                                     <a href="#">twitter</a>                                 </li>                                 <li>                                     <a href="#">google+</a>                                 </li>                                 <li>                                     <a href="#">linkedin</a>                                 </li>                             </ul>                         </li>                     </ul>                 </div>             </div>         </div>         <div class="container">             <div class = "row">                 <div class="col-md-6 col-xs-10">                     <form class = "form-group">                         <label class = "control-label">username</label>                         <input class = "from-control" type = "text" placeholder = "username">                         <label class = "control-label">password</label>                         <input class = "form-control" type = "password" placeholder = "password">                         <label class = "control-label">confirm password</label>                         <input class = "form-control" type = "password" placeholder = "confirm password">                         <label class = "control-label">email address</label>                         <input class = "form-control" type = "email" placeholder = "harry@potter.com">                         <label class = "control-label">date of birth</label>                         <input class = "form-control" type = "date" placeholder = "date of birth(mm/dd/yyyy)">                         <label class = "control-label"> think of jsp </label>                         <textarea rows = "3" class = "form-control" style = "resize: none;"></textarea>                     </form>                 </div>             </div>         </div>         <div class = "navbar navbar-default navbar-fixed-bottom">             <p class = "navbar-text">hail pawanism</p>         </div>         <!-- jquery (necessary bootstrap's javascript plugins) -->         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>         <!-- include compiled plugins (below), or include individual files needed -->         <script src="bootstrap/js/bootstrap.min.js"></script>      </body> </html>

just use padding-top: 70px; in body tag's css implementation push app content down.

it happens because when apply navbar-fixed-top class defines position of navbar fixed , , whenever use fixed positioning in css element element moved out of flow of layout, when navbar out of layout elements starts top of body .

you can check this link better understand css positioning


Comments

Post a Comment

Popular posts from this blog

javascript - jquery or ashx not working -

i using ajax file upload control. it creating html: <form action="/pages/handlers/asyncfileuploadhandler.ashx" method="post" enctype="multipart/form-data" target="ajaxuploader-iframe-1397144545"> <input type="hidden" name="type" value="mindvoice"> <input type="file" id="imagefile" style="display: block; width: 80%; margin-right: auto; margin-left: auto;"> </form> and target is: <iframe width="0" height="0" style="display:none;" name="ajaxuploader-iframe-1397144545" id="ajaxuploader-iframe-1397144545"></iframe> the form submitted using .submit() . my ashx handler: <%@ webhandler language="c#" class="asyncfileuploadhandler" %> using system; using system.web; using nettpals.core; public class asyncfileuploadhandler : ihttphandler { public void processre...
Read more

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

i wondering why line used in lucas kanade tracker in opencv: datatype<cv::detail::deriv_type>::depth can explain me? in opencv, depth of mat refers type of data contained in mat 's data buffer. represented integer values correspond given data type. these integers commonly abstracted appropriate macro definition (e.g. uchar data represented macro cv_8u ). cv::datatype type-traits class provides method obtain corresponding integer value without having memorize macro means data type. there few cases user code needs use datatype::depth . more common datatype::type . a simple example shows 1 possible use of datatype::depth : cv::mat uchar_data = cv::mat::ones(3, 3, cv_8uc1); cv::mat float_data; uchar_data.convertto(float_data, cv::datatype<float>::depth); // ^^ equivalently replaced // cv_32f macro float_data.at<float>(0,1) += 0.5f; std::cout << float_data << std::endl;...
Read more

python 3.x - Mapping specific letters onto a list of words -

can please suggest approach write piece of codes automatically maps letter in letter_str onto dic_key (a dict key string type contains dashes match length of words in word_lst)? so, mapping occurs if letter appears in every words in list @ same position no matter how many words in list. if no letter appears @ position words in word list new_dic_key '----'. please see examples below thanks word_lst = ['ague', 'bute', 'byre', 'came', 'case', 'doze'] dic_key = '----' letters_str ='abcdefghijklmnopqrstuvwxyz' new_dic_key = '---e' if word_list = ['bute', 'byre'] new_dic_key = 'b--e' or word_list = ['drek', 'drew', 'dyes'] new_dic_key = 'd-e-' if words in word_list of same length code give want: word_list = ['drek', 'drew', 'dyes'] cols = [] in range(len(word_list[0])): cols.append([]) word in ...
Read more