文章/答案/技术大牛

发布

社区首页 >问答首页 >全屏响应式网格

问全屏响应式网格
EN

Stack Overflow用户

提问于 2014-05-09 13:48:49

回答 2查看 1.5K关注 0票数 0

我试图弄清楚如何构建一个全屏幕响应式网格，但找不到任何明确的东西

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

当屏幕尺寸减小到平板电脑的分辨率时，每行6个图像的大小将减小以适应尺寸。一旦它达到平板电脑的分辨率，它就会断开，因此现在只有4列，因此每行有4个图像。

然后重复相同的过程，直到达到移动大小，即每行只有2张图像。它不一定非得是这样，但可以接受一些类似的东西。

我已经看过bootstrap和foundation了，但它提供的主容器似乎限制了最大宽度，阻止了它实现全屏布局。

你们有什么建议？希望你能理解我的意思

css

twitter-bootstrap

grid

media-queries

html

回答 2

Stack Overflow用户

发布于 2014-05-09 14:14:30

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

票数 0

Stack Overflow用户

发布于 2014-05-09 15:08:52

<!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">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23557440

复制

相似问题

问全屏响应式网格
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏响应式网格EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全屏响应式网格
EN