删除小屏幕模式下的行之间的空间

问题描述：

我已经使这个网站在正常的浏览器中正确格式化，但是一旦布局崩溃了一个较小的屏幕，我会在行之间获得空间。我将如何解决这个问题？删除小屏幕模式下的行之间的空间

链接代码：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>

答

您正在使用H1标题，H1标题具有自己的保证金属性。给你的H1标题h1{margin:0px}。希望能工作。

答

您的h1标签有margin-bottom和margin-top，将它们设置为“0”，您会看到它将被修复。试着用填充物来移动它们。

答

首先答案是正确的，但如果你需要的只是小屏幕则只是把打击代码中CSS：

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

右小屏@media正在工作 – Minesh

答

使用媒体查询，让你的H1保证金0，像这样的

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

删除小屏幕模式下的行之间的空间

相关推荐