Question

我正在试图弄清楚如何构建一个全屏响应网格，但无法找到明确的

让我说明一下我想要实现的目标。在完整的桌面屏幕上，网格必须有6列，其中包含无限量的重复行，每行高度为300px。每个网格位置内部都是一个图像

随着屏幕尺寸缩小，直到平板电脑分辨率，每行6幅图像的尺寸将缩小以适应。一旦达到平板电脑分辨率，它就会断开，现在只有4列，因此每行4张图像。

然后重复相同的过程，直到它达到移动大小，每行只有2个图像。它并非必须完全相同，但可以接受的是那些线条。

我看了一下bootstrap和foundation，但似乎提供的主容器限制了最大宽度，使其无法实现全屏布局。

你们有什么建议？希望你能理解我的目标

Answer 1

您可以使用CSS覆盖Bootstrap的容器限制。

Answer 2

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/examples/grid/grid.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
    <div class="col-md-2 col-sm-2 col-xs-2"></div>
</div>
<div class="row">
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
    <div class="col-md-2 col-sm-2 col-xs-2"></div>
</div>
<div class="row">
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-md-2 col-sm-2 col-xs-2"></div>
    <div class="col-md-2 col-sm-2 col-xs-2"></div>
</div>
</div>
</body>
</html>

然后，如果您想自定义，请尝试设置媒体查询。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

将此用于图像

<img src="sample.jpg" class="img-responsive" alt="Sample image">

全屏响应网格

2 个答案: