我在 Bootstrap 中使用推拉创建列但没有工作
[英] I create column in Bootstrap with push and pull but no working
本文介绍了我在 Bootstrap 中使用推拉创建列但没有工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这个代码用于大屏和小屏
<div>A</div>
<div class="col-xs-12 col-lg-8"><div>B</div>
<div class="col-xs-6 col-lg-2"><div>C</div>
大屏幕
|____A___|___B___|_____c____|
我想要这个小屏幕
|_________B___________|
|____A____|_____C_____|
请提供小代码
解决方案
您可以使用 pull 和 push 响应式帮助器类来完成此操作.
因为 Bootstrap 3 是一个移动优先的框架,总是从最小的视图开始.最小视图中列的顺序应该是 html 中列的顺序,所以 B、A 和 C.将 B 的大小设置为 .col-xs-12
,A 设置为 .col-xs-6
和C.您最小的布局现在已经完美了.
对于较大的布局,我使用了 md,首先固定列大小,例如 A、B 和 C 应该都出现在一行中,它们应该加起来为 12 列.由于 B 应该是 A 或 C 的两倍,这会导致.col-md-6
用于 B 和 .col-md-3
用于 A 和 C.大布局中列的大小现在是正确的,但列 B 和 A 的顺序错误.
要固定顺序,您应该将 A 列向左移动六列,因此将 .col-md-pull-6
添加到 A>.B 列需要在 A 列之后开始,因此通过添加 .col-md-push-3
将其向右移动三列.
.box {背景色:#f99;边框:1px 实心 #c66;文本对齐:居中;}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><div class="col-xs-12 col-md-6 col-md-push-3"><div class="box">B</div></div><div class="col-xs-6 col-md-3 col-md-pull-6"><div class="box">A</div></div><div class="col-xs-6 col-md-3"><div class="box">C</div></div>
P.S. 这种创建具有不同列顺序的响应式布局的方法有效,直到您必须将一列推或拉到另一行.由于推和拉类设置具有 position:relative
的列的 left
或 right
属性,这将永远不会使列换行到另一列排.如果您需要此选项,可以选择复制列及其内容,并使用 visible-xs-block
之类的类以正确的布局显示它们.
I use this code for big screen and small screen
<div class="col-xs-6 col-lg-2">
<div>A</div>
</div>
<div class="col-xs-12 col-lg-8 ">
<div>B</div>
</div>
<div class="col-xs-6 col-lg-2">
<div>C</div>
</div>
Big screen
|____A___|_______B_______|_____c____|
i want to this small screen
|_________B___________|
|____A____|_____C_____|
Please provide code for small
解决方案
You can do this using the pull and push responsive helper classes.
As Bootstrap 3 is a mobile first framework always start with the smallest view. The order of your columns in the smallest view should be the order of the columns in the html, so B, A and C. Set the size to .col-xs-12
for B and .col-xs-6
for A and C. Your smallest layout is now perfect.
For the larger layout, I've used md, start with fixing the column sizes, as A, B and C should all occur on a single row they should sum up to 12 columns. As B should be twice the size of A or C this leads to a
.col-md-6
for B and .col-md-3
for both A and C. The size of the columns in the large layout is now correct but column B and A are in the wrong order.
To fix the order you should move column A six columns to the left, so add .col-md-pull-6
to A. Column B needs to start after column A, so move it three columns to the right by adding .col-md-push-3
.
.box {
background-color: #f99;
border: 1px solid #c66;
text-align: center;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3"><div class="box">B</div></div>
<div class="col-xs-6 col-md-3 col-md-pull-6"><div class="box">A</div></div>
<div class="col-xs-6 col-md-3"><div class="box">C</div></div>
</div>
</div>
P.S. This method of creating responsive layouts with different column orders works until you have to push or pull a column to another row. As the push and pull classes set the left
or right
property of an column that has position: relative
this will never make a column wrap to another row. If you need this an option is to duplicate the column and its contents and use classes like visible-xs-block
to show them in the proper layout.
这篇关于我在 Bootstrap 中使用推拉创建列但没有工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!