列重叠在小屏幕上

时间:2017-10-16 17:22:09

标签: twitter-bootstrap

在小屏幕和标签上相互叠加的列, 但在宽屏幕上工作正常。

                    <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">&nbsp;</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>`

1 个答案:

答案 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">&nbsp;</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>

            `