Question

我的某个部分的响应度存在问题。

http://apts.apartment.cz/travel-test/index.html

对不起，该网站是捷克语，但我相信你会得到它。它是＆＃34; REZERVUJTE SI＆＃34; H2 之下的那个。在1200px下，按钮未对齐。在992px下，按钮延伸到下图。在768px以下也存在同样的问题。

我确定有一个简单的解决方案，但我无法弄明白。如果可以，我会非常高兴。

再次感谢您的所有提示！

Radim

Answer 1

将此代码粘贴到styleSheet的底部，这将解决您的问题

@media(max-width:1200px){
    .col-md-3.col-sm-6.text-center > p { 
        min-height: 85px;
    }
    a.button_intro, .button_intro {
        margin-bottom: 15px;
    }
}   
@media(max-width:767px){
    .col-md-3.col-sm-6.text-center > p { 
        min-height: 0;
    }
}

Answer 2

您可以在css中为这些决议添加min-height或height。实现此目的的一种方法是在段落中添加一个类，并在该类中创建min-height: 80px;。

Answer 3

对于button，您需要添加一些margin-bottom值。然后按钮扩展到图片问题将得到修复

Answer 4

如果您注意到width > 1200px时所有段落的文本行数相同（即三行），那么所有容器都将对齐且高度相同但width < 1200px时段落的文本行数将根据段落长度而有所不同，这将影响整个容器的高度，因此最好的做法是添加min-height:90px或任何px您想要的<p>

Answer 5

此代码将帮助您进行桌面视图，对于大量内容高度工作正常。您需要按照以下方法添加类.flex-row和.flex-col和.post。

＆＃13;

.flex-row{
display:flex;
}
.flex-col{
flex:1;
position:relative;
padding-bottom:45px;
}
.post {
    position: absolute;
    width: 100%;
    left: 0px;
    text-align: center;
    bottom: 0px;
}

＆＃13;

<div class="row flex-row">
					<div class="col-md-3 col-sm-6 text-center flex-col">
						<p>
							<a href="https://www.booking.com/country/gr.html?aid=1324331&amp;label=gr" target="_blank"><img src="img/hotely_800.jpg" alt="Pic" class="img-responsive"></a>
						</p>
						<h4>Hotely</h4>
						<p>
							Vybírejte si z hotelů, apartmánů, vil, hostelů, penzionů i dalších typů ubytování v Řecku za nejlepší ceny!
						</p>
                        <div class="post"><a href="https://www.booking.com/country/gr.html?aid=1324331&amp;label=gr" target="_blank" class="animated fadeInUp button_intro">Najít hotely</a></div>
					</div>
					<div class="col-md-3 col-sm-6 text-center flex-col">
						<p>
							<a href="http://letenky.kralovna.cz/booking/index.jsp?id_dealer=5551" target="_blank"><img src="img/letenky_800.jpg" alt="Pic" class="img-responsive"></a>
						</p>
						<h4>Letenky</h4>
						<p>
							Potřebujete levné letenky do Řecka? Není nic jednoduššího než si vybrat z nabídky našich renomovaných partnerů!
						</p>
                        <div class="post"><a href="http://letenky.kralovna.cz/booking/index.jsp?id_dealer=5551" target="_blank" class="animated fadeInUp button_intro">Najít letenky</a></div>
					</div>
					<div class="col-md-3 col-sm-6 text-center flex-col">
						<p>
							<a href="https://dovolena.invia.cz/recko/?aid=4282530" target="_blank"><img src="img/zajezdy_800.jpg" alt="Pic" class="img-responsive"></a>
						</p>
						<h4>Zájezdy</h4>
						<p>
							Pokud neradi cestujete na vlastní pěst, vyberte si jeden ze zájezdů do Řecka za skvělé ceny!
						</p>
                      <div class="post">  <a href="https://dovolena.invia.cz/recko/?aid=4282530" target="_blank" class="animated fadeInUp button_intro">Najít zájezdy</a></div>
					</div>
					<div class="col-md-3 col-sm-6 text-center flex-col">
						<p>
							<a href="http://www.rentalcars.com?affiliateCode=e_travel_cz" target="_blank"><img src="img/auto_800.jpg" alt="Pic" class="img-responsive"></a>
						</p>
						<h4>Půjčení auta</h4>
						<p>
							Pokud si chcete užít bezstarostnou dovolenou a poznat destinaci se vším všudy, podívejte se na nabídku autopůjčoven!
						</p>
                     <div class="post">   <a href="http://www.rentalcars.com?affiliateCode=e_travel_cz" target="_blank" class="animated fadeInUp button_intro">Najít auta</a></div>
					</div>
				</div>

＆＃13;

部分响应问题

5 个答案: