Question

我希望在bootstrap中复制这个效果。 http://tympanus.net/codrops/2013/04/17/responsive-full-width-grid/

我一直在使用带有col-lg，col-md，col-xs，col-sm的不同组合的流体容器

但是在渲染图像以填充窗口的整个宽度时遇到了问题。它们要么在图像之间留下很多空间，要么彼此重叠。

非常感谢任何正确方向的帮助。谢谢！

Answer 1

我认为最简单的方法是删除列周围的装订线，然后使用Bootstrap col-*-*布置响应式图像网格。

/* remove spacing between columns */
.row.no-gutter [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

http://codeply.com/go/KoZilXlyin

Answer 2

包含图片的锚标记需要width:100%，图片需要max-width:100%。 Bootstrap有一个responsive images的类。

Answer 3

Bootstrap的边距和填充设置为其类。你需要重置它。

例如，如果您使用的是fluid-container，row以及col-sm-2和col-md-1类，则需要在css文件中重置其边距/填充。

.fluid-container {
    margin: 0;
    padding: 0;
}
.fluid-container row{
    margin: 0;
    padding: 0;
}
.fluid-container row col-sm-2, .fluid-container row col-md-1{
    margin: 0;
    padding: 0;
}

我强烈建议您使用标准Bootstrap类中的至少一个差异标识，以防止弄乱未来的网格：

.fluid-container-fullpage {
        margin: 0;
        padding: 0;
    }
    .fluid-container-fullpage row-fullpage{
        margin: 0;
        padding: 0;
    }
    .fluid-container-fullpage row-fullpage col-sm-2-fullpage, .fluid-container-fullpage row-fullpage col-md-1-fullpage{
        margin: 0;
        padding: 0;
    }

Answer 4

为网格列实现100％宽度的最佳方法是覆盖由 .col - * 类引导网格提供的隐式填充。根据问题中提供的示例链接，我创建了Plunker。这只是一个示例，您可以根据自己的要求进行修改。我使用了 col-sm - ，因为对于普通屏幕，网格列水平对齐，屏幕尺寸为＆lt; 768px 然后它垂直堆叠。希望这会有所帮助。

HTML：

<div class="col-sm-3 col-width">
    <div class="cuadro_intro_hover" style="background-color:#cccccc;">
        <p style="text-align:center; margin-top:20px;">
            <img src="http://placehold.it/500x330" class="img-responsive" alt="">
        </p>
        <div class="caption">
            <div class="blur"></div>
            <div class="caption-text">
                <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Felix Cat</h3>
            </div>
        </div>
    </div>
</div>

CSS：

.col-width {
    padding-right:0 !important;
    padding-left:0 !important;
    border: 1px solid;
}

具有Bootstrap的响应全宽图像网格

4 个答案: