Question

我已经使这个网站在普通浏览器中正确格式化，但是一旦布局折叠成较小的屏幕，我就会在行之间获得空格。我该如何解决这个问题？

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

Answer 1

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

Answer 2

以上所有答案都是正确的，但如果您只需要小屏幕，那么只需在css中输入打击代码：

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

Answer 3

你的h1标签有margin-bottom和margin-top，将它们设置为＆＃34; 0＆＃34;你会看到它将被修复。尝试用填充物移动它们。

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

3 个答案: