引导中的堆叠顺序

我在引导中存在堆叠顺序的问题。我意识到已经提出了类似的问题，并且应该使用它的推拉。但我无法让它工作。引导中的堆叠顺序

这是使用的代码IM：

<div class="row"> 
 
    \t <div class="col-xs-12 col-sm-6"> a </div> 
 
    \t <div class="col-xs-12"> b </div> 
 
    \t <div class="col-xs-12 col-sm-6"> c </div> 
 
</div>

我要的是A，B和C是下海誓山盟，才能在移动视图，但在桌面视图和c应该在他们下面的分隔符和b旁边。

一个
b
Ç

一个C
b

来源

2014-09-22 Kalle Henningson

我不确定，但我认为bootstraps网格系统的工作与12个culumns。有更多列的块会跳进下一行，但这是一个幸运的结果。拉和推它不起作用（https://github.com/twbs/bootstrap/issues/10107） – schlagi123 2014-09-22 13:10:59

这不完全是一回事，但它接近...

Bootply：http://www.bootply.com/D5AmKsc6aT

HTML：

<div class="row"> 
    <div class="col-xs-12 col-md-6"> 
    <div class="row"> 
     <div class="col-xs-12">A</div> 
     <div class="col-xs-12">B</div>  
    </div> 
    </div> 
    <div class="col-xs-12 col-md-6">C</div> 
</div>

来源

2014-09-22 13:16:32 pbenard

谢谢，然而在这个例子中，A和C最终会在彼此旁边结束，但是然后B不会穿过桌面上的整个页面。 – 2014-09-23 08:50:17

有没有需要大量的HTML，它只是一个2列布局的每一列是50％。你不需要嵌套列。您不需要在非嵌套结构中指定col-xs-12 - 在列类最小宽度以下时，内容为100％。

DEMO：http://jsbin.com/paqoke/2/edit

<div class="row"> 

     <div class="col-sm-6"> 

     <p>A</p> 

     <p>B</p> 

     </div><!--/.col-*-6--> 

     <div class="col-sm-6"> 
      C 
     </div><!--/.col-*-6--> 

    </div><!--/.row--> 

</div><!--/.container-->

来源

2014-09-22 13:35:29 Christina

谢谢，但是在这个例子中，A和C最终会在彼此的旁边结束，但是B并没有跨过桌面上的整个页面。 – 2014-09-23 08:38:38

可悲的是，推/拉不会帮助你在这里，因为你不能在一列跳。你必须复制一些你的内容（在这个例子中，我欺骗了col-c）并使用bootstraps hidden-xs和visible-xs助手类来显示/隐藏适当的设备。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 bg-success"> a </div> 
    <div class="hidden-xs col-sm-6 bg-info"> c desktop</div> 
    <div class="col-xs-12 bg-warning"> b </div> 
    <div class="visible-xs col-xs-12 bg-info"> c mobile</div> 
    </div> 
</div>

DEMO：http://www.bootply.com/SW2ygwLVNY

另外值得注意的，你不必申报col-xs-12如果你声明的另一个电网级，因为它是默认xs宽度。（即，在xs上时，col-sm-6默认为col-xs-12）。

来源

2014-09-24 19:32:18

我很害怕这种情况。不幸的是我不能使用隐藏和可见的类，因为我的顺利滚动插件变得困惑。我可以用媒体查询和jquery将不同的ID推送给隐藏的div，或者病态的可能只是向客户解释她只是简单地接受showreel将在底部:) Thx的反馈，虽然！ – 2014-09-25 00:14:13

引导中的堆叠顺序

回答

相关问题