html - Mozilla Firefox 显示图片的不同位置

Question

我正在使用 Twitter Bootstrap 构建网站。我将页面内容分为 4 个部分 - 1. 是标题 (col-sm-4)，2.,3.,4 是图片 (col sm-2 >、col-sm-2、col-sm-4)。我制作了一个 CSS 类来下拉图片。我希望它们在 H3 标题 Obrazky: 旁边排成一排。每个浏览器都完全按照我想要的方式显示它，除了 Mozzila 将这三个图像放在整个网页旁边。我需要解决这个问题。

HTML

<div class="col-sm-4">
          <br>
         <h3>Obrázky:</h3>
    </div>

         <div class="col-sm-2 pull-down">
            <br><br>
            <img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
            <p class="text-center"><strong>Zobrazení na mobilu</strong></p>
            <br>
         </div>

         <div class="col-sm-2 pull-down">
            <img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
            <p class="text-center"><strong>Zobrazení na tabletu</strong></p>
            <br>
         </div>

         <div class="col-sm-4 pull-down">
            <img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
            <p class="text-center"><strong>Zobrazení na notebooku</strong></p>
            <br>
         </div>

CSS

    .pull-down {
float: none;
display: table-cell;
vertical-align: bottom;
}

Answer 1

试试这个:

<div class="container">
<div class="row">

<div class="col-sm-4">
          <br>
         <h3>Obrázky:</h3>
</div>

<div class="col-sm-2 pull-down">
            <br><br>
            <img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
        <p class="text-center"><strong>Zobrazení na mobilu</strong></p>
        <br>
     </div>

     <div class="col-sm-2 pull-down">
        <img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
        <p class="text-center"><strong>Zobrazení na tabletu</strong></p>
        <br>
     </div>

     <div class="col-sm-4 pull-down">
        <img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
        <p class="text-center"><strong>Zobrazení na notebooku</strong></p>
        <br>
     </div>
</div>
</div>