刪除小屏幕模式下的行之間的空間

我已經使這個網站在正常的瀏覽器中正確格式化，但是一旦佈局崩潰了一個較小的屏幕，我會在行之間獲得空間。我將如何解決這個問題？刪除小屏幕模式下的行之間的空間

鏈接代碼：https://codepen.io/MarkHarrison/pen/KvqLbJ

我使用的容器，流體，所以我認爲，這將打破向下翻頁正常。我究竟做錯了什麼？

<div class="container-fluid"> 
    <body data-spy="scroll" data-target=".navbar"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <!--grouping for mobile display--> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavBar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Mark's Bits</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavBar"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#about" class="slide-section">About</a></li> 
      <li><a href="#portfolio" class="slide-section">Portfolio</a></li> 
      <li><a href="#contact" class="slide-section">Contact</a></li> 
     </ul> 
     </div> 
    </nav> 

    <!--about section--> 
    <div class="row"> 
     <div class="col-md-3"></div> 
     <div class="col-md-6 abColor"><h1 id="about">About</h1></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3 col-md-offset-3 abColor" id="inline"> 
     <p id="splurg"><br>Front end developer dedicated to making responsive websites across platforms. Experience with project management, teamwork, and many other programming languages. Looking for a developer role.</p> 
     </div> 
     <div class="col-md-3 abColor"> 
     <img src="" alt="headshot" class="img-responsive img-circle center-block headshot"> 
     </div> 
    </div> 
    <!--end of about section--> 

    <!--portfolio section--> 
    <div class="row" id="portfolio"> 
     <div class="col-md-6 col-md-offset-3 portColor"><h1>Portfolio</h1></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3 col-md-offset-3 portColor"> 
     <img src="" class="img-responsive center-block"> 
     <img src="" class="img-responsive center-block"> 
     <img src="" class="img-responsive center-block"> 
     </div> 
     <div class="col-md-3 portColor"> 
     <img src="" class="img-responsive center-block"> 
     <img src="" class="img-responsive center-block"> 
     <img src="" class="img-responsive center-block"> 
     </div> 
    </div> 
    <!-- end of portfolio section--> 

    <!--contact section--> 
    <div class="row" id="contact"> 
     <div class="col-md-6 col-md-offset-3 conColor"><h1>Contact<small><br>To contact me please fill in the form</small></h1></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3 conColor formBox"> 
     <form class="center-block text-center"> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Name"> 
      </div> 
      <div class="form-group"> 
      <input type="email" class="form-control" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
      <input type="number" class="form-control" placeholder="Telephone Number"> 
      </div> 
      <div class="form-group"> 
      <textarea class="form-control" placeholder="Message" rows="3"></textarea> 
      </div>   
      <button class="btn btn-default">Send</button> 
     </form> 
     </div> 
    </div> 
    <!--end on contact section-->  
    </body> 
</div>

來源

2017-08-11 Mark Harrison

您正在使用H1標題，H1標題具有自己的保證金屬性。給你的H1標題h1{margin:0px}。希望能工作。

來源

2017-08-11 12:07:06

您的h1標籤有margin-bottom和margin-top，將它們設置爲「0」，您會看到它將被修復。試着用填充物來移動它們。

來源

2017-08-11 12:06:57 Dimash

首先答案是正確的，但如果你需要的只是小屏幕則只是把打擊代碼中CSS：

@media (max-width:1024px){ 
h1{ 
    margin-top:0px; 
    margin-bottom:0px; 
} 
}

來源

2017-08-11 12:14:05

右小屏@media正在工作 – Minesh

使用媒體查詢，讓你的H1保證金0，像這樣的

@media only screen and (device-width: 1024px), 
     only screen and (max-width: 1024px) { 
     h1{ 
      margin-top:0px; 
      margin-bottom:0px; 
     } 
}

來源

2017-08-11 12:16:58

刪除小屏幕模式下的行之間的空間

回答

相關問題