【问题标题】:responsive design more than 2 column use order bootstrap3响应式设计超过 2 列使用顺序 bootstrap3
【发布时间】:2014-08-01 21:42:20
【问题描述】:

使用 bootstrap 3 我对使用列排序的推/拉有一些疑问。这就是我所追求的: 现在(大尺寸)

    .          .         .                                 
l   .    c     .     r   .                    
    .          .         .

到(小号)

  .                   .                                     
  .         c         .                       
  .                   . 

  .        .          .                               
  .    l   .   r      .
  .        .          .

请帮帮我?

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

col-xs-* 用于最小的显示布局。将 col-lg-* 更改为 col-sm-*,以便 Bootstrap 将此样式用于所有其他显示尺寸。

col2 设置为col-xs-12 将强制其他元素位于新行上。

通过将col2 移动到第一个项目,您可以使用col-sm-push-*col-sm-pull-* 将其移动到较大显示尺寸的第二个位置。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-2">col2</div>      
  <div class="col-xs-6 col-sm-2 col-sm-pull-6">col1</div>
  <div class="col-xs-6 col-sm-4">col3</div>
</div>

使用BootStrap Grid Options

【讨论】:

  • 这段代码将第一列 (col-sm-2) 向上推,将第一列的中心列和右列向上推,但我想将中心列向上移动
  • 对不起,我看错了你的问题。我找到了答案并编辑了我的答案以适应。见stackoverflow.com/a/22840840/1442771
猜你喜欢
相关资源
最近更新 更多
热门标签