Question

我正在尝试为我的新纪录片创建一个网站，并且发现Bootstrap非常有用，但我遇到了一些问题：

我有12个图像，我希望它们被排列成3行4个，但要确保使用较小的屏幕，这样就可以了，所以也许在移动设备上每列只有1个图像（或两个）

以下是网站（无边距）http://athomewhileaway.org/gallery.html

有什么想法吗？感谢...

Answer 1

请注意xs（超小）和sm（小）您可以将.col-xs-6（第2行）或.col-xs-12（单列）用于手机和平板电脑的.col-sm-6 / .col-sm-12，相信高达768px。如果你提供一个小提琴，我将为你提供一个更好的解决方案。了解详情here。

在超小型设备上（大多数手机）：

<div class="container">
    <div class="row">
       <div class="col-xs-6">
             #Your Stuff
       </div>
       <div class="col-xs-6">
             #Your Stuff
       </div>
    </div>
</div>

Answer 2

请尝试这个

HTML

<div class="row no-gutter">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
</div>

如果您需要在小屏幕中显示一张照片，则可以从相关div中删除col-xs-6类

CSS

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

此CSS属性需要删除列之间的空格（默认情况下为Twitter Bootstrap set gutter width）。

谢谢！

照片库图像边距

2 个答案: