Question

在我的引导网站上，我连续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>

谢谢！

Answer 1

看看我制作的这个快速小提琴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

enter image description here

Answer 2

您必须为每个分辨率指定bootstrap-responsive.css文件中这些图片的风格。为了让它们按你想要的那样出现。

您是否包含了引导程序附带的自适应样式表？您使用的是“span12”，“span2”等适当的类吗？

Answer 3

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

，而不是使用span6类。

使用Bootstrap将元素作为成对排列（响应）

3 个答案: