bootstrap-整个背景图片，顶部导航栏

berimbolo 发表于 Dev

有一个符号

我正在尝试使用浮动在图像顶部的导航栏创建完整的背景图像页面。

我遇到一个问题，就是导航栏将图像向下推，图像设置在html元素的背景上，所以我不知道为什么导航栏具有这种效果。

我只是直接在引导程序入门页面上使用css，并且没有导航栏，图像就适合整个页面，而导航栏则位于图像上方并向下推：

CSS：

html{
            /* This image will be displayed fullscreen */
            background:url('bg.jpg') no-repeat center center;

            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;

            /* The Magic */
            background-size:cover;
        }

        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;           
        }

        .navbar {
            margin-top: 0px;
            margin-bottom: 0px;
        }

HTML：

    <body>
    <div class="container">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <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 navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</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>
                      <li><a href="#">Something else here</a></li>
                      <li><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>

                </div><!-- /.navbar-collapse -->
            </div>
        </nav>
    </div>

我要结束的效果是整个页面的图像，导航栏位于图像下方，而不是向下推动图像，因此它在导航栏之后开始。

Pivemi

将以下两行CSS应用于正文，而不是html元素：

 body {
            background:url('bg.jpg') no-repeat center center;
            background-size:cover;  

            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;
        }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。