css - Bootstrap 容器内容未居中超过 1200 像素视口(viewport)宽度

Question

我目前正在开发一个网站，您可以在 Pencakova website 上查看该网站(测试版。)

我在网站的第二部分遇到了容器问题 pencakova second .看到那三张照片了吗？它们应该在容器中居中，但如果视口(viewport)宽度大于 1200，它就不起作用。问题是什么？

HTML部分:

<div id="pictures" class="col-md-12">
        <div class="container">
            <div class="pic col-md-3 col-lg-3">
                <img src="img/pic1.jpg" alt="" class="img-responsive">
                <p>Best European roasters<br>roast various types of the<br> coffee of the highest quality</p>
        </div>
        <div class="pic col-md-3 col-lg-3">
            <img src="img/pic2.jpg" alt="" class="img-responsive">
            <p>From these various types<br> of coffee, we choose<br>four types that fit you best.</p>
        </div>
        <div class="pic col-md-3 col-lg-3">
            <img src="img/pic3.jpg" alt="" class="img-responsive">
            <p>And finally, we will send you<br>box of best coffee that you<br>can't get anywhere else.</p>
        </div>
    </div>
</div>

还有 CSS:

#pictures {
display: block;
margin: 4em 0;
text-align: center;
font-family: 'RalewayLight';
font-size: 1em;
letter-spacing: 1.5px;
}
.pic {
    display: inline-block;
    margin: 0 2em;

}
.pic:first-child {
    text-align: right;
}
.pic:last-child {
    text-align: left;
}
.pic img {
    /*max-height: 20%;*/
    margin-bottom: 1em;
    /*max-width: 20px;*/
}
.pic:first-child p {
    padding-right: 0.3em;
}
.pic:last-child p {
    padding-left: 0.3em;
}

    @media (max-width:1500px) and (min-width:800px){ 
        .pic img {
            max-width: 280px;
        }
}

Answer 1

更改您的 html，使带有 class="pic"的 div 具有这样的 'col-md-4 col-lg-4':

<div class="pic col-md-4 col-lg-4">
  <img src="img/pic3.jpg" alt="" class="img-responsive">
  <p>And finally, we will send you<br>box of best coffee that you<br>can't get anywhere else.</p>
</div>

并将您的 .pic 规则更改为:

.pic {
    display: inline-block;
    margin: 0;
}

最后，从您的 CSS 中删除这些规则:

.pic:first-child {
    text-align: right;
}

.pic:last-child {
    text-align: left;
}