我在 Bootstrap 中使用推拉创建列但没有工作 [英] I create column in Bootstrap with push and pull but no working

问题描述

这个代码用于大屏和小屏

 
<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屋！