html - 如何更好地控制响应图像断点和与 BS3 对齐

Question

我正在尝试控制放置在网格中的一些响应式图像。 不幸的是，当视口(viewport)的宽度发生变化时会发生 2 件烦人的事情:

1. 一开始是连续 4 张的图片，很快变成连续 1 张，即使视口(viewport)中有足够的空间容纳 2-3 张。
2. 连续 1 张时，图片未居中。

HTML

<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2>Image test</h2>

                <hr class="line-color"></hr>
            </div>
        </div>
        <div class="row team-images">
            <div class="col-md-3">
                <div class="team-item">
                    <div class="team-text">
                         <h3>John Doe</h3>

                         <h4>COO</h4>

                    </div>
                    <div class="team-image-overlay"></div>
                    <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="team-item">
                    <div class="team-text">
                         <h3>Moe Joe</h3>

                         <h4>COO</h4>

                    </div>
                    <div class="team-image-overlay"></div>
                    <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="team-item">
                    <div class="team-text">
                         <h3>Jimbo Joe</h3>

                         <h4>COO</h4>

                    </div>
                    <div class="team-image-overlay"></div>
                    <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
                </div>
            </div>
            <div class="col-md-3">
                <div class="team-item">
                    <div class="team-text">
                         <h3>Jimmy Joe</h3>

                         <h4>COO</h4>

                    </div>
                    <div class="team-image-overlay"></div>
                    <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
                </div>
            </div>
        </div>
    </div>
</section>

CSS

body {
    margin: 10px;
}
.team-images img {
    max-height:300px;
    width:auto;
}
.team-text {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color:rgba(0, 0, 0, 0.4);
}
.team-text h3 {
    margin-top:5px;
    font-weight: 300;
    margin-bottom: 0;
    text-transform: none;
}
.team-text h4 {
    margin-bottom:5px;
    margin-top: 0;
    padding-top: 0;
    font-weight: 200;
    font-size: 1em;
    text-transform: none;
}
.team-item {
    position: relative;
    display:inline-block;
    margin-bottom:10px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}

演示:https://jsfiddle.net/DTcHh/7189/

Answer 1

在您的专栏中，您只指定了 col-md-3，它只会在中到大分辨率期间触发。

您可以改为设置 col-md-3 col-sm-3 或仅设置 col-sm-3 这样它也会在较小的分辨率上触发。

对于不居中的图片，可以通过在其容器上设置text-align:center来实现。

.team-images > div {
    text-align:center;
} 

工作 fiddle :https://jsfiddle.net/1L4fgdf5/3/

针对您在下方的评论，如果您不想使用脚手架，请在 css 上使用媒体查询。

@media (min-width: 992px) and (max-width: 1199px) {
    .team-images .col-md-3 {
      width: 50%;
    }
}

工作 fiddle :https://jsfiddle.net/da9b30fn/