首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >引导3栅极-lg-3到col 2,即4x1到2x2网格

引导3栅极-lg-3到col 2,即4x1到2x2网格
EN

Stack Overflow用户
提问于 2015-04-19 16:05:39
回答 2查看 526关注 0票数 1

我有一个由4列组成的图像网格,我想将其更改为两列行。我以为这会成功:col-lg-3 col-xs-2,但它没有。

我哪里出问题了?

代码:

代码语言:javascript
运行
复制
.test-content{
    width:100%;
    height:100px;
    background:lightblue;
}

<div class="row">

    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>
    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>

<!-- It's like I should have a closing div here for the first row, and open another row just for col-xs-2, but obviously I can't do this for col-lg-3 -->

    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>
    <div class="col-lg-3 col-xs-2">
        <div class="test-content">content</div>
    </div>

</div>

小提琴:http://jsfiddle.net/41ry7qvk/

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-19 16:17:15

引导程序正在使用一个划分为12个部分的网格。

col-lg-3表示它的宽度为3/12,所以如果你想要2行,你需要col 6。

xs也是如此:

col-xs-3表示它的宽度为3/12,所以如果你想要xs屏幕上的2行,你需要-xs-6。

票数 1
EN

Stack Overflow用户

发布于 2015-04-19 16:15:13

自举网格系统有12个网格。因此,与col-xs-2不同,您应该编写col-xs-6,以便在一行中有2个图像。

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

https://stackoverflow.com/questions/29732272

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档