Question

我对这个场景和网页设计都很陌生，但是我希望有一天能够学到更多东西并提供帮助！

到目前为止，我已经设法启动并运行了一个基本的主页，但是我已经阅读了如何使用bootstrap创建一个关于页面的响应，我无法弄清楚为什么会有这个神秘的当我在Chrome中查看该页面时，其中一张照片上方的空间。这个空间导致整张照片不对齐，我不知道它会从哪里来。

我尝试在stackoverflow网站上搜索，但老实说，我甚至不知道我在寻找什么。我最接近的是this之前的答案。

我的网站是skyridge.us，我已将代码的一部分包含在我所指的正文中：

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Our Team</h1>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/daniel-shen-450.jpg alt="">
            <h3>Daniel<br><small>Founder</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/michael-wu-450.jpg alt="">
            <h3>Michael<br><small>Technology Adviser</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/miles-shen-450.jpg alt="">
            <h3>Miles<br><small>Graphic Designer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/philip-groenwegen-450.jpg alt="">
            <h3>Philip<br><small>US History Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/fil-lekkas-450.jpg alt="">
            <h3>Fil<br><small>Speech and Debate Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/christina-shen-450.jpg alt="">
            <h3>Christina<br><small>Administrative Adviser</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/andy-mun-450.jpg alt="">
            <h3>Andy<br><small>Economics Course Developer</small></h3>
        </div>
　　　　 <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/alex-isper-450.jpg alt="">
            <h3>Alex<br><small>US Government Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/dennis-wang-450.jpg alt="">
            <h3>Dennis<br><small>Biology and Physics Course Developer</small></h3>
        </div>
    </div>

Answer 1

如果你附上我做过的一些演示会有所帮助：https://jsfiddle.net/12345/DTcHh/9359/

我想这与你几乎每个div col-med-X的div都有关，当它应该是col-md-X时。

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">

你在代码的最后一行开头就有了额外的空间......

Answer 2

由于某些奇怪的原因，您的媒体查询在这里：

@media (min-width: 1200px)
  .col-lg-4 {
    width: 33.33333333%;
  }
}

导致此问题。我不确定为什么。我在检查员中将该值更改为下降1％，当我达到31％时，它是完美的。

不确定没有花太多时间在这上面的确切原因是什么。希望这有点帮助。

enter image description here

使用twitter bootstrap排除关于页面上图像的麻烦

2 个答案: