背景漸變不適用於Bootstrap導航欄固定頂部

Question

背景漸變不適用於Bootstrap 3.0 navbar-fixed-top或bottom ，只是默認設置。

 html, body { height: auto; width: 100%; overflow-x: hidden; } body { background: #000000; /* fallback for old browsers */ background: -webkit-linear-gradient(270deg, #000000 , #434343); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(270deg, #000000 , #434343); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</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"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

根據DOM，我收到“ 無效屬性值 ”錯誤。 這僅在使用類navbar-fixed-bottom或navbar-fixed-top 。

是否有人遇到類似問題或是否知道導致頁面顯示白色的原因？

這是一個codepen： http ://codepen.io/Xociety/pen/jAgoWR

Answer 1

發生這種情況的原因是因為您給身體

height: auto;

這意味着身體的高度將由瀏覽器計算。 但是，當您添加navbar-fixed-bottom ，會將固定位置添加到，這樣導航條的高度就不會影響身體的高度，瀏覽器會將其計算為0高度，並且不會顯示漸變。

如果你改變

height: auto;

至

height: 100%;

您告訴瀏覽器您希望HTML的高度為100％。 因為身體會顯示出來，所以會顯示漸變。

Answer 2

您需要將<html>和<body>的高度設置為100% 。

的CSS

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

結果

密碼筆

Answer 3

另一個解決方案可能是：

.navbar-fixed-bottom, .navbar-fixed-top
{
    position: inherit;
}

背景漸變不適用於Bootstrap導航欄固定頂部

問題描述

3 個解決方案

解決方案1
2 已采納 2016-08-29 15:53:01

解決方案2
1 2016-08-29 15:45:44

解決方案3
1 2016-08-29 15:48:26

背景漸變不適用於Bootstrap導航欄固定頂部

問題描述

3 個解決方案

解決方案1 2 已采納 2016-08-29 15:53:01

解決方案2 1 2016-08-29 15:45:44

解決方案3 1 2016-08-29 15:48:26

解決方案1
2 已采納 2016-08-29 15:53:01

解決方案2
1 2016-08-29 15:45:44

解決方案3
1 2016-08-29 15:48:26