Как прижать навбар вниз главного экрана

234

15 марта 2018, 08:47

Но при прокрутки вниз оставался фиксированным наверху ,скиньте примеры простые

Answer 1

Источник

Да фиксации navbar вверху нужно добавить клас navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        ...
      </div>
    </nav>

Да фиксации navbar внизу нужно добавить клас navbar-fixed-bottom

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <title>Starter Template for Bootstrap</title> 
    <style> 
    body { 
  padding-top: 50px; 
} 
.starter-template { 
  padding: 40px 15px; 
  text-align: center; 
} 
    </style> 
  </head> 
 
  <body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-bottom"> 
      <div class="container"> 
        <div class="navbar-header"> 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
            <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="#">Project name</a> 
        </div> 
        <div id="navbar" class="collapse navbar-collapse"> 
          <ul class="nav navbar-nav"> 
            <li class="active"><a href="#">Home</a></li> 
            <li><a href="#about">About</a></li> 
            <li><a href="#contact">Contact</a></li> 
          </ul> 
        </div><!--/.nav-collapse --> 
      </div> 
    </nav> 
 
    <div class="container"> 
 
      <div class="starter-template"> 
        <h1>Bootstrap starter template</h1> 
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> 
      </div> 
 
    </div> 
  </body> 
</html>

Answer 2

Пример был взят от сюда https://www.w3schools.com/howto/howto_css_bottom_nav.asp

body {margin:0;} 
 
.navbar { 
  overflow: hidden; 
  background-color: #333; 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
} 
 
.navbar a { 
  float: left; 
  display: block; 
  color: #f2f2f2; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
  font-size: 17px; 
} 
 
.navbar a:hover { 
  background: #f1f1f1; 
  color: black; 
} 
 
.navbar a.active { 
  background-color: #4CAF50; 
  color: white; 
} 
 
.main { 
  padding: 16px; 
  margin-bottom: 30px; 
}

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
 
<div class="navbar"> 
  <a href="#home" class="active">Home</a> 
  <a href="#news">News</a> 
  <a href="#contact">Contact</a> 
</div> 
 
<div class="main"> 
  <h1>Bottom Navigation Bar</h1> 
  <p>Some text some text some text.</p> 
</div> 
 
</body> 
</html>