有可能引导网格系统吗？
有可能引导网格系统吗？
提问于 2014-12-05 12:44:26
日安！我正在试图找出以下情况是否可行。
当它在台式机/笔记本电脑上时，布局应该如下所示
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
article
</div>当它在小屏幕上时，两个div将切换，并且必须像这个一样。
<div class="col-md-9">
sidebar
</div>
<div class="col-md-3">
article
</div>谢谢你的回答！
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-12-05 12:48:26
你可以的!通过向<div>添加多个网格类，您可以为每个断点定义列的大小。在您的示例中，这可能是侧栏上的col-xs-9 col-md-3，文章中的col-xs-3 col-md-9。这将使侧边栏占据xs和sm断点大小的12列中的9列，以及md和lg断点大小的12列中的3列。
在全屏中打开下面的示例来播放断点。
.box {
border: 1px solid #c66;
background-color: #f99;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-9 col-md-3 box">
sidebar
</div>
<div class="col-xs-3 col-md-9 box">
article
</div>
从您的评论中，我看到您希望文章在小屏幕的侧边栏上。这就有点棘手了。你需要做三件事：
- 开发移动首先从小屏幕的布局开始。您需要更改侧栏和文章
<div>的顺序。 - 确保在小屏幕上使用
col-xs-12，边栏和文章都占据了12列中的12列。这将使侧边栏被推到文章下面。 - 注意，在桌面屏幕上，侧边栏和文章确实会同时出现在一起，但是侧边栏在右边而不是左边。您可以通过添加
col-md-pull-9(您需要将它拉到左边9列、文章占用的列数量)并通过添加col-md-push-3(您需要将它向右推3列、侧边栏占用的列数)来改变这一点。
请参阅更新后的示例：
.box {
border: 1px solid #c66;
background-color: #f99;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-md-9 col-md-push-3 box">
article
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9 box">
sidebar
</div>
Stack Overflow用户
发布于 2014-12-05 12:49:17
引导程序很少有前缀来指定宽度类：-xs- / -sm- / -md- / -lg- (从最小宽度到最大宽度)。
因此，从-md-和更大的屏幕上可以看到col-md-3和col-md-9。要使它们在预-md-类上按相反顺序排列，可以指定-xs-或-sm-前缀。
因此，要逆转您的类，只需编写：
<div class="col-md-9 col-xs-3"></div>
<div class="col-md-3 col-xs-9"></div>Stack Overflow用户
发布于 2014-12-05 12:49:15
试试这个：
<div class="col-sm-9 col-md-3">
sidebar
</div>
<div class="col-sm-3 col-md-9">
article
</div>这将在eXtraSmall (xs)和SMall (sm)中的9个块以及MeDium (md)和LarGe (lg)的3个块中显示侧边栏，反之亦然。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27316183
复制相关文章
相似问题
腾讯云开发者
