Question

我目前正在开设一个网站，您可以在Pencakova website上查看（测试版。）

我在网站的第二部分pencakova second遇到容器问题。看那三张照片？它们应该以容器为中心，但如果视口宽度大于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>

将您的CSS中的.pic规则更改为：

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

最后，从你的css中删除这些规则：

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

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

Bootstrap容器内容不以1200px视口宽度为中心

1 个答案: