2017-11-16 2 views
0

단락, 머리말 및 버튼과 같은 내 컨테이너 요소가 내 탐색 바 아래에 있습니다. navbar는 fixed-top 속성을가집니다. 나는이 같은 다른 stackoverflow 게시물 (twitter bootstrap navbar fixed top overlapping site)에서 이전 제안을 사용했습니다. 하지만 아무것도 나를 위해 작동하는 것 같습니다. 여기에 내 navbar 코드입니다.탐색 바 아래에있는 구성 요소

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


      } 
+0

그것은 [문서]를 판독하는 것이 유용 (http://getbootstrap.com/docs/4.0/components/navbar/#placement) -이 - 패딩 'top'에 사용하도록 권장 중복을 막기 위해 ''. – fen1x

답변

0

당신이 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>

+0

감사합니다. 왜 그래도 이해가 안되지만 –

+0

특정 화면 너비 (여기서는 0에서 979px)에만 적용되는 미디어 쿼리에서 패딩을 작성했습니다. 그것이 도움이된다면이 대답을 수락하십시오. –