css - 通过 Bootstrap 实现切片式页面

Question

我在使用 Twitter bootstrap 3 呈现由不同切片组成的网页时遇到了问题。最终产品将是一个由 行 组成的页面，其中包含 img-responsive 切片，这些切片保留在各自的行中(即它们不换行)

但是 Bootstrap CSS 对图像做了一些有趣的事情。它们嵌套在可预测的结构 container>row>col-xs-12>Images 中，但即使我设置了图像 margin: 0;，仍然有一个相邻图像之间的小间隙。此外，无论如何我都无法让具有多个切片的 rows 保持在同一行(因为如果切片换行，页面就没有意义)并且仍然“响应”。

或者，如果有人可以指导我如何设置响应式图像映射(或向我发送固定链接)，我可以尝试这条路线。

Answer 1

您需要将每个图像放在自己的 col-xs-* 中，覆盖 col-xs 填充，并添加 max-width:100% 到 img。另外，不要对 .row 的用法感到困惑。这并不意味着将元素限制在可视行中，也不是。坦率地说，这个名字具有误导性。只需在 .container 中使用单个 .row，并确保您的 col-xs 加起来为 12，这样您就可以避免不需要的包装。

这是一个例子:http://www.bootply.com/aYOdYaV4Gq

.col-xs-3{
padding-right:0px;
padding-left:0px;
}

.img{
max-width:100%;
}

在我的 bootply 中，我实际上添加了 具有这些属性的类，而不是像上面那样覆盖 Bootstrap 类。两者都有效，但添加自定义类意味着以后打开和关闭它会更容易。