Question

我是bootstrap的新手。在我的网站上我添加了一些段落内容和一张图片，网页看起来很好。但在移动视图中我需要在下面显示需要显示段落的第一张图片。
任何人都可以帮帮我做到了吗？

<div class="container">
   <div id="aboutUsContent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <section class="col-lg-6 col-md-6 col-sm-12 col-xs-12 paddingLeft">
        <h1>ABOUT</h1>

        <p>Lorem ipsum dolor sit amet,consecteture adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore feugait nulla facilsi.Lorem ipsum dolor sit amet,cons ectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eart volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullat.</p>
      </section>
      <section class="col-lg-6 col-md-6 col-sm-12 col-xs-12 truckImg">
        <img src="https://www.rentmerentals.co.nz/assets/Uploads/HT-TRUCK-Isuzu-Elf-Truck-upgraded.png">
      </section>
      <div class="footer">
          </div>
    </div>
 </div>

Answer 1

<div class="container">
   <div id="aboutUsContent" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <section class="col-lg-6 col-md-6 col-sm-12 col-xs-12 paddingLeft">
        <h1>ABOUT</h1>

        <p>Lorem ipsum dolor sit amet,consecteture adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volupat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore feugait nulla facilsi.Lorem ipsum dolor sit amet,cons ectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eart volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullat.</p>
      </section>
      <section class="col-lg-6 col-md-6 col-sm-12 col-xs-12 truckImg">
        <img src="https://www.rentmerentals.co.nz/assets/Uploads/HT-TRUCK-Isuzu-Elf-Truck-upgraded.png" class="img-responsive">
      </section>
      <div class="footer">
          </div>
    </div>

您只需在class="img-responsive"代码

中使用img即可

使用bootstrap的网页的响应性

1 个答案: