在小屏幕和标签上相互叠加的列, 但在宽屏幕上工作正常。
<div class="col-md-4 col-md-4 col-xs-4">
<img class="img-valign" src="img/Hotel/Kempenski.jpg" width="350px;" height="200px;" alt="" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4" align="left" style="margin-top: 5%;">
<h4 align="justify" style="text-decoration: underline"><strong>Recommended Hotel</strong></h4>
<p align="justify"><strong>Burj Rafal Hotel Kempinski</strong></p>
<p align="justify">7647 King Fahd Road,<br> Exit 4, As Sahafah District، As Sahafah,<br> Riyadh - Sauid Arabia</p>
<p align="justify"> </p>
<p align="justify"><strong>4.2 Star Ratings</strong></p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" align="left" style="margin-top: 5%;">
<p align="justify"><strong>Hotel Fare</strong></p>
<p align="justify">Starting from: 1,160 SAR</p>
</div>
</div>`
答案 0 :(得分:0)
在这里我找到了解决方案,我正在以错误的方式分配列。
<div class="col-xs-12 col-lg-4">
<img class="img-responsive" src="img/Hotel/Kempenski.jpg" width="350px;" height="200px;" alt="" />
</div>
<div class="col-xs-12 col-lg-4">
<h4 align="justify" style="text-decoration: underline"><strong>Recommended Hotel</strong></h4>
<p align="justify"><strong>Burj Rafal Hotel Kempinski</strong></p>
<p align="justify">7647 King Fahd Road,<br> Exit 4, As Sahafah District، As Sahafah,<br> Riyadh - Sauid Arabia</p>
<p align="justify"> </p>
<p align="justify"><strong>4.2 Star Ratings</strong></p>
</div>
<div class="col-xs-12 col-lg-4">
<p align="justify"><strong>Hotel Fare</strong></p>
<p align="justify">Starting from: 1,160 SAR</p>
</div>
`