我有像下面的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 回答
我建议(即使它很脏)添加你的视图两次,一次在一个
而对于其他'布局
希望有所帮助(期待更好的解决方案;)) .
你在说什么是在第二列之前放置第三列并为其分配完整的宽度,bootstrap不会这样做 .
只有当这些列显示为带有pull-let和pull-right的单行时,才能执行此操作 . 您唯一的选择是在这种情况下复制标记,或者写下您自己的CSS以在第二列之前放置第三列(但这不是一个好主意) .
你可以在小屏幕上隐藏第二个div;然后第三个div将处于第二位 . 然后你必须在第三个div之后复制第二个div并仅在小屏幕上显示,然后在最后两个div上左右拉动 . 类似的东西可能有用(这个例子适用于小):
在这种情况下,使用col-xs-12实际上是不必要的,并且在大多数情况下,该列将比使用的最后一个col类低100% .
DEMO:https://jsbin.com/nuhoba
如果你有一个图形来描述你想要的东西会更好 . 如果我正确地遵循了,那么你将按照它在一个小视口上的顺序来命令你的html - 如果列在同一个
.row
并且.row
不超过12列,你可以左右推拉 . 在任何给定的列类中,每行最多需要添加12列,为简单起见,我使用col-sm-X . 如果您使用col-md和/或large,这意味着您必须在其他列上使用这些列,但它需要在该最小宽度处添加到12 .HTML:
CSS