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>

Mozilla Firefox显示了不同的图片位置

1 个答案: