Question

我是网络开发领域的新手。所以，请不要介意这是一个非常愚蠢的问题，但我正在为Free Code Camp做一个项目，我遇到了这个问题，我无法摆脱左右两侧的空间。这是我正在编码的笔： http://codepen.io/K-Jabeen/full/oxOjjQ/

<section id="home">
    <div class="container-fluid">
      <center>
        <br>
        <img class="img-responsive"  src="http://ivanmyc.site11.com/wp-content/uploads/2014/07/Web-Development_icon.png" />
        <h1>Pixel Developers</h1>
        <h4>Where pixel perfect web solutions are created...</h4>
        <br>
        <br>
        <br>
        <br>
        <br>
      </center>
    </div>
  </section>

Plz告诉我如何解决这个问题。谢谢！

Answer 1

从第一个container-fluid中删除div课程：

<div class="container-fluid">

......所以它变成了：

<div>

或者，您可以将margin: 0 -15px;添加到#home的CSS中。

Answer 2

您的主页应添加此CSS：

保证金：0自动;
宽度：100％;

“自动”一词告诉浏览器无论屏幕有多宽，都能使主页保持居中。宽度100％告诉浏览器图像从一侧到另一侧跨越屏幕。这应该摆脱任何方面的差距。确保您的代码没有任何现有的边距或填充。如果是，请将其设置为零。

HTML5和Bootstrap - 两侧留有空格？

2 个答案: