2

在我的引导站点上，我连续有 6 张图片（桌面视图）：

|  Ø  Ø  Ø  Ø  Ø  Ø   |

但是当我用平板电脑或手机打开网站时，我想将这些图片成对分组 - 居中：

|        Ø  Ø         |
|        Ø  Ø         |
|        Ø  Ø         |

相反，结果总是这样：

|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |
|Ø                    |

我如何修改课程以正确安排项目？

更新

我将元素分组为 3 对。当我切换到桌面模式时，一切都很好，除非我在平板电脑或手机上查看网站。

药片

| Ø  Ø   Ø  Ø         |
| Ø  Ø                |

电话

| Ø  Ø                |
| Ø  Ø                |
| Ø  Ø                |

这是代码：

<div class="row">
    <div class="span4">
      <div class="row-fluid text">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
        </div>
    </div>
        <div class="span4">
      <div class="row-fluid">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
        </div>
  </div> <div class="span4">
      <div class="row-fluid">
          <div class="span6">
            <p><img src="img/icon.png"></p>
          </div>
          <div class="span6">
           <p><img src="img/icon.png"></p>
          </div>
        </div>
  </div>
</div>

谢谢！

4

3 回答 3

2

看看我制作的这个快速小提琴Demo 

<div class="span-1"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-2"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-3"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-4"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-5"><img src="http://placehold.it/300x100" alt=""></div>
<div class="span-6"><img src="http://placehold.it/300x100" alt=""></div>

以上是您的类似布局

一点点 CSS

div[class^="span-"] {
    width:49%; // Each image parent 49% (1% left for margin)
    float:left; // Float them all left so we can fit 2 on each line
    margin:0 .5%; // Little bit of margin for visibility 
}

div[class^="span-"]:nth-child(odd){
    text-align:right; // For every odd element align it right ( for even default is left anyway)
}

使这个

这就是它的全部。您在引导程序中遇到了一些冲突，但您应该能够弄清楚这一点，因为没有太多可以被覆盖的东西。

顺便说一句，你不能只用类来建立一个网站，即使在引导程序中你也必须CSS使用

在此处输入图像描述

于 2013-07-13T17:14:43.040 回答
0

您必须在 bootstrap-responsive.css 文件中为每个分辨率指定这些图片的样式。为了让他们如你所愿地出现。

您是否包含了引导程序附带的响应式样式表？您是否使用了正确的类，如“span12”、“span2”等？

于 2013-07-13T16:46:12.370 回答
0

问题在于，在引导响应 css 中，当视口切换到平板电脑或手机时，所有跨度都变为 100% 宽度。而不是使用 span6 类，您只需要创建一个新类并将宽度设置为接近 50%（取决于您想要的边距）并设置 float left

于 2013-07-13T17:16:41.583 回答