Question

我的容器元素，如段落，标题和按钮都在我的导航栏下。导航栏具有固定顶部的属性。我已经使用过此类其他stackoverflow帖子的先前建议（twitter bootstrap navbar fixed top overlapping site）。但似乎没有什么对我有用。这是我的导航条代码。

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand text-white" href="#"> Bacon Bacon</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link text-white" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我的容器代码

 <div class="container-fluid bg-overlay">
    <div class="row text-center">
        <h1>Loren Inpsum</h1>
        <h4>Loren Inpsum Loren Inpsum Loren Inpsum Loren Inpsum </h4>
        <button type="button" class="btn btn-primary btn-lg">Get Started</button>
    </div>
</div>

我的CSS

 @media (max-width: 979px) {
            body {
              padding-top: 70px;
            }
}


          .navbar { 
            margin-bottom:0px;
            background: #FFFFFF;
            border-color: #FFFFFF;
            padding-bottom:0px;
          }


          .bg-overlay {
            background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
            background-repeat: no-repeat;
            text-align:center;
            background-size: cover;
            background-position: center center;
            color: #fff;
            height: 450px;
            padding-top: 0px;
  }

            div.container-fluid bg-overlay{
              margin-bottom:30px;


            }

Answer 1

您需要在MQ之外添加padding-top。

body {
  padding-top: 60px;
}
 @media (max-width: 979px) {
            body {
              padding-top: 70px;
            }
}


          .navbar { 
            margin-bottom:0px;
            background: #FFFFFF;
            border-color: #FFFFFF;
            padding-bottom:0px;
          }


          .bg-overlay {
            background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
            background-repeat: no-repeat;
            text-align:center;
            background-size: cover;
            background-position: center center;
            color: #fff;
            height: 450px;
            padding-top: 0px;
  }

            div.container-fluid bg-overlay{
              margin-bottom:30px;


            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand text-white" href="#"> Bacon Bacon</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link text-white" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

 <div class="container-fluid bg-overlay">
    <div class="row text-center">
        <h1>Loren Inpsum</h1>
        <h4>Loren Inpsum Loren Inpsum Loren Inpsum Loren Inpsum </h4>
        <button type="button" class="btn btn-primary btn-lg">Get Started</button>
    </div>
</div>

导航栏下的组件

1 个答案: