Question

我试图复制this theme

中看到的效果

到目前为止，我有4个图标，下面有文字，这不是我想要的，

  <div class="gridContainer">
    <!-- Sections of page, used for smooth scrolling -->
    <section id="about" class="smooth-scroll">
      <!-- Four column grid system -->
      <div class="col-sm-3 text-lefts">
        <!-- Grid content goes here -->
        <img  class="productIcon" src="images/closed-door-with-border-silhouette.png" alt="Doors" />
        <h4>Doors</h4>
        <p>Delivered in your choice of facing-veneered, laminated or primed for internal painting, certified fire rating, factory glazed to your design and prepared for your lock fitting.</p>
      </div>
      <div class="col-sm-3 text-left">
        <!-- Grid content goes here -->
        <img class="productIcon" src="images/closed-doors-with-windows.png" alt="Door sets" />
        <h4>Doorsets</h4>
        <p>The easy way to ensure the co-ordination and quality of your interior design specification. Simply select your components and leave the rest to us.</p>
      </div>
      <div class="col-sm-3 text-left">
        <!-- Grid content goes here -->
        <img class="productIcon" src="images/locked-padlock.png" alt="Security doors" />
        <h4>Security Doors</h4>
        <p>Guaranteed protection with a line of defence that is the recognised industry leader in timber based security door systems. </p>
      </div>
      <div class="col-sm-3 text-left">
        <!-- Grid content goes here -->
        <img class="productIcon" src="images/portable-toilet-doors.png" alt="Washroom cubicles" />
        <h4>Washroom Cubicles</h4>
        <p>Choose from an extensive range of colours and sizes available to suit many applications in the construction and leisure industries.</p>
      </div>
    </section>
  </div>

有人可以帮助我吗？

Answer 1

http://www.bootply.com/VTVCNOYllG#

<div class="container2" style="display:table">
  <div style="width:100px; display:table-cell; vertical-align:top;"> 
    <img src="http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png" style="float:left; width:50px; height:50px;"></div>
  <div style="width:300px; display:table-cell; vertical-align:top;">Lorem ipsum
    Integer posuere quam sem. Sed congue pharetra felis et sollicitudin.
    Lorem ipsum Integer posuere quam sem. Sed congue pharetra felis et sollicitudin.</div>
</div>

Answer 2

使用Bootstrap Media object来模仿该显示。

<div class="media">
  <div class="media-left">
    <img class="media-object" src="..." alt="...">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

如何使图像显示在引导程序中文本的左侧

2 个答案: