twitter-bootstrap 移动版中的 Bootstrap 列

Bootstrap columns in mobile version

提问by Fernanda Luiz Pinto

I'm using bootstrap to make a website, but it's something is wrong.

我正在使用 bootstrap 制作网站，但出了点问题。

I want to make 2 rows and 3 columns and when the screen changes to mobile, I want it to be 3 rows and 2 columns.

我想制作 2 行和 3 列，当屏幕更改为移动设备时，我希望它是 3 行和 2 列。

Desktop

桌面

|A|   |B|   |C| 
|D|   |E|   |F|

Mobile

移动的

|A|  |B|
|C|  |D|
|E|  |F|

I used the code below to do it, but the images don't stay like I want it to.

我使用下面的代码来做到这一点，但图像并不像我想要的那样。

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
<div class="col-xs-6 col-sm-4 col-md-4">Content</div>
</div>

The images stay like this

图像保持这样

|A| |B|
    |C|
|D| |E|
|F|

Thanks in advance!

提前致谢！

回答by Eric G

I have run into this problem before. The issue has been that my content is different heights. Because Bootstrap uses floats to arrange it's columns your column C cannot float all the way to the left if your column A is taller than column B.

我以前遇到过这个问题。问题是我的内容高度不同。因为 Bootstrap 使用浮动来排列它的列，如果 A 列比 B 列高，则 C 列不能一直向左浮动。

I have included a link to a codepen so you can see it in action. The top two rows are exactly your code above while the bottom two rows show a div with a different height than the other divs.

我已经包含了一个 codepen 的链接，所以你可以看到它的运行情况。前两行正是您上面的代码，而后两行显示的 div 与其他 div 的高度不同。

http://codepen.io/egerrard/pen/PGRQYK

http://codepen.io/egerrard/pen/PGRQYK

The solution for you will be to set the height of your divs to the max height for all your content. Something like

您的解决方案是将 div 的高度设置为所有内容的最大高度。就像是

.maxHeightDiv {
    height: 200px;
}

You'll probably have to set heights for different window widths. It can be a little annoying but this is a caveat of the bootstrap float system.

您可能必须为不同的窗口宽度设置高度。这可能有点烦人，但这是引导浮动系统的一个警告。

回答by JasParkety

Even though this is old maybe it helps some of you.

即使这是旧的，也许它对你们中的一些人有所帮助。

My way is more code than probably necessary but I couldn't came up with a bootstrap grid system solution that provides different column and row changes in combination with screen width changes.

我的方式是比可能需要的代码更多，但我无法想出一个引导网格系统解决方案，该解决方案提供不同的列和行更改以及屏幕宽度更改。

So lets start:

那么让我们开始吧：

• Switching to .scssand implement bootstrap responsive functions
• Include a parent div which acts as a view toggle container for your bootstrap gird system
• Usage of display: none !importantand display: inline !importantfor the divs
• A hint, set the width of the image class to max-widht: 100%;, it will force the images to take as much place as they can without exceeding its parent width; unless you want different unique sizes of course

• 切换到.scss并实现引导响应功能
• 包含一个父 div，它充当引导网格系统的视图切换容器
• 使用display: none !important和display: inline !important用于 div
• 提示，将图像类的宽度设置为max-widht: 100%;，它会强制图像尽可能多地占据位置，而不会超过其父宽度；除非你当然想要不同的独特尺寸

.scss: (check your bootstrap css version)

.scss:(检查你的引导css版本）

$stageZero: 540px;
$stageOneLower: 719px;
$stageOneHigher: 720px;
$stageTwoLower: 959px;
$stageTwoHigher: 960px;
$stageThree: 1140px;

@mixin stage00 {
  @media (max-width: $stageZero) { @content; }
}

@mixin stage01 {
  @media (min-width:$stageOneLower) and (max-width:$stageOneHigher)  { @content; }
}

@mixin stage02 {
  @media (min-width:$stageTwoLower) and (max-width:$stageTwoHigher) { @content; }
}

@mixin stage03 {
  @media (min-width: $stageThree) { @content; }
}
.mobileViewToggle {
    @include stage00 {display: inline !important;}
    @include stage01 {display: none !important;}
    @include stage02 {display: none !important;}
    @include stage03 {display: none !important;}
}
.desktopViewToggle {
    @include stage00 {display: none !important;}
    @include stage01 {display: inline !important;}
    @include stage02 {display: inline !important;}
    @include stage03 {display: inline !important;}
}

.html:

.html：

<div class="mobileViewToggle">
    < Bootstrap Grid Code with xs prefix, e.g. col-xs-4>
</div>

<div class="desktopViewToggle">
    < Bootstrap Grid Code with sm prefix, e.g. col-sm-6>
</div>

回答by Milind

You can use the below class as shown...

您可以使用以下类，如图所示...

1. col-xs-2- will be two columns only on xs devices-(mobile)
2. col-md-3- will be 3 columns on all devices other the mobile

1. col-xs-2- 仅在 xs 设备上为两列 -（移动）
2. col-md-3- 将在移动设备以外的所有设备上显示为 3 列

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> You cannot change the rows however without using js. Moreover,on mobile,does it really matters... ?

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> 但是，如果不使用 js，则无法更改行。此外，在移动设备上，这真的很重要吗...？