首页 文章

如何在超小型设备中重新安装bootstrap网格

提问于
浏览
4

我有像下面的html标记,

<div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                    Some contents
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
                    Some Content
                </div>
                <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12"  >
                    Some Content
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right"  >
                    <div class="company-add-btn"><a href="#">+ Add more companies</a></div>
                </div>
            </div>

在大型显示器中,它可以正常工作,在列中构造四个div .

但在小型显示器中,我喜欢重新安排布局,

  • 第一个div将获得一个全宽的完整行

  • 第三个div将在第二个div之前出现并取一个中心对齐的完整行

  • 第2和第4个div需要一个完整的行,第二行保持在左边,第四个向右浮动 .

使用bootstrap col-md-pull- *或col-md-push- *只会在一行内重新排序 . 这样就行不通了 .

一种可能的解决方案是复制每个媒体断点的标记,但是没有更好的方法吗?

任何人都可以建议吗?或者指出一个开始寻找解决方案的好地方?

4 回答

  • 0

    我建议(即使它很脏)添加你的视图两次,一次在一个

    <div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
    

    而对于其他'布局

    <div class="hidden-xs">Your content for everything but XS-grid.</div>
    

    希望有所帮助(期待更好的解决方案;)) .

  • 0

    你在说什么是在第二列之前放置第三列并为其分配完整的宽度,bootstrap不会这样做 .

    只有当这些列显示为带有pull-let和pull-right的单行时,才能执行此操作 . 您唯一的选择是在这种情况下复制标记,或者写下您自己的CSS以在第二列之前放置第三列(但这不是一个好主意) .

  • 1

    你可以在小屏幕上隐藏第二个div;然后第三个div将处于第二位 . 然后你必须在第三个div之后复制第二个div并仅在小屏幕上显示,然后在最后两个div上左右拉动 . 类似的东西可能有用(这个例子适用于小):

    <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    Some contents 1
                </div>
                <div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
                    Some Content 2
                </div>
                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
                    Some Content 3
                </div>
                <div class="visible-sm col-sm-9 lefty" >
                    Some Content 2 - duplicate
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty"  >
                    <div class="company-add-btn"><a href="#">+ Add more companies</a></div>
                </div>
            </div>
    
  • 0

    在这种情况下,使用col-xs-12实际上是不必要的,并且在大多数情况下,该列将比使用的最后一个col类低100% .

    DEMO:https://jsbin.com/nuhoba

    如果你有一个图形来描述你想要的东西会更好 . 如果我正确地遵循了,那么你将按照它在一个小视口上的顺序来命令你的html - 如果列在同一个 .row 并且 .row 不超过12列,你可以左右推拉 . 在任何给定的列类中,每行最多需要添加12列,为简单起见,我使用col-sm-X . 如果您使用col-md和/或large,这意味着您必须在其他列上使用这些列,但它需要在该最小宽度处添加到12 .

    HTML:

    <div class="container">
       <div class="row">
          <div class="col-sm-3">
             A
          </div>
          <div class="col-sm-4 col-sm-push-2 text-center-xs">
             C
          </div>
          <div class="col-sm-2 col-sm-pull-4">
             B
          </div>
          <div class="col-sm-3 text-right">
             <div class="company-add-btn"><a href="#">+ D</a></div>
          </div>
       </div>
    </div>
    

    CSS

    @media (max-width:767px) {
      .text-center-xs {text-align:center;}
    
    }
    

相关问题