0
我已经创建了引导程序库并且工作正常，但是在小屏幕中会出现此问题，并且设计在中等屏幕中会出现问题。 任何人都可以帮我解决这个问题 这个问题是因为大的居中图像发生的，所以如何改进ddesign布局!! 错误布局引导程序库
.our-gallery .margin-bottom{
margin-bottom:40px;
}
.our-gallery .overlay-gallery{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgb(254, 88, 149);
opacity:0;
text-align:center;
transition:opacity .3s linear;
padding:10px;
}
.our-gallery .img-thumb{
position:relative;
width:100%;
}
.our-gallery .overlay-gallery:hover{opacity:.75;}
.our-gallery .overlay-gallery p{
color:#fff;
font-size:18px;
font-family:Consolas,Arial,'Comic Sans MS';
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="our-gallery">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 margin-bottom">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151645.jpg?itok=yY0PVMkG" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Blush peonies made up the romantic bridal bouquet.
</p>
</div>
</div>
<div class="img-thumb">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Polina topped her loose, romantic waves with a lush floral crown. She also wore pearl earrings and a bracelet that were gifts from her husband-to-be.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="img-thumb">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151643.jpg?itok=ceG1BJ1L" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Polina, a photographer and jewelry designer based in Russia, met Robertas, an entrepreneur born and raised in Lithuania before moving to South Carolina after college, while in the United States during a student exchange program with her native country. The pair met at a friend's beach house party and immediately hit it off. "It just so happens that I'd learned the Russian language in school, and it made it so much easier to communicate," said Robertas. After a wonderful summer together, Polina had to return to Russia, but "we did not want to lose each other and, against all odds, started a long-distance relationship," recalled Robertas. After dating for two years, Robertas proposed during a hot air balloon ride over a lake in Europe. They tied the knot one year later in an intimate celebration with ten of their closest friends and family members, including Robertas' family from Lithuania and Polina's family from Russia.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Polina helped design her own wedding dress, which was custom-made in Europe.
</p>
</div>
</div>
<div class="img-thumb">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Before the ceremony, the couple had a first look. "Polina took my breath away," recalled Robertas.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
The couple chose Litchfield Plantation for their celebration due to its Southern charm, romance, and intimacy.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
The couple exchanged personalized vows in their native language.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
During the ceremony, the couple asked their parents to join them for the lighting of a unity candle, which symbolizes two families coming together.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Here, the couple poses beneath the weeping willows. </p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
The two-tier vanilla cake featured a strawberry filling.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Robertas' peony boutonniere coordinated perfectly with Polina's bridal crown.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Photos from the couple's engagement session adorned a vintage door near the guest
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
Additional desserts included cultural favorites, like Oreshki (a cookie baked in a walnut mold and filled with dulce de leche), a Luthianian cake that's "stacked like a Christmas tree," and traditional wedding spice cookies.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
"Many shouts of 'gorko, gorko' were heard throughout the night, signaling that the bride and groom must kiss!" recalled their wedding planner.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
For the intimate dinner party, wedding planner Gigi Noelle Events enhanced the natural beauty of the surroundings with a tent frame draped with sheer white fabric. Vintage bird cages, soft flowers, and a chandelier overhead accented the table.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
The couple shared a special dance to "Moon River." "It's timeless," said the groom.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="img-thumb margin-bottom">
<img class="img-responsive" src="http://www.bridalguide.com/sites/default/files/styles/600x800/public/rw-images/269-151638.jpg?itok=GC1q2tH6" alt="fw_il_013_01" data-animation="animated rotateInDownLeft" />
<div class="overlay-gallery">
<p>
The newlyweds' advice to engaged couples: "It really helps if you have a strong vision, and don't be afraid to try something new."
</p>
</div>
</div>
</div>
</div>
</div>
</section>
极坏的照片。 ：P –
Bootstrap并不总是足以实现完全响应的布局。您还需要使用一些媒体查询以使其充分响应 – IamFaysal