Question

背景渐变不适用于Bootstrap 3.0 navbar-fixed-top或bottom，只是默认设置。

＆＃13;

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+ */
        
}

＆＃13;

<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>

＆＃13;

根据DOM，我得到一个＆＃34; 无效的属性值＆＃34;错误。这只有在我使用课程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%;

你告诉浏览器你想要高度100％的html。并且渐变将显示，因为身体将显示。

Answer 2

您需要将<html>和<body>的高度设为100%。

<强> CSS

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

<强>结果

<强> CodePen

Answer 3

另一种解决方案可能是：

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

背景渐变不使用Bootstrap navbar-fixed-top

3 个答案: