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