twitter-bootstrap 屏幕小时如何折叠引导列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37096034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to collapse bootstrap column when screen small?
提问by user3745236
Is there a way to accomplish the above using Bootstrap, where 3 columns are shown if the screen is wide enough, but only the first and last columns are shown on a smaller screen (like mobile)?
有没有办法使用 Bootstrap 完成上述操作，如果屏幕足够宽，则显示 3 列，但在较小的屏幕（如移动设备）上仅显示第一列和最后一列？
回答by gavgrif
you dont need col-xs-12 at all - by default all content that does not have an -xs- designation will be displayed full width on a mobile (ie:xs size). All you need to do is designate the columns on larger viewports than xs. Note that there is a -sm- class as well so if you want to go 2 across on small viewports (still hiding div 2 on small screens):
您根本不需要 col-xs-12 - 默认情况下，所有没有 -xs- 指定的内容将在移动设备上全宽显示（即：xs 大小）。您需要做的就是在比 xs 更大的视口上指定列。请注意，还有一个 -sm- 类，因此如果您想在小视口上跨越 2（仍然在小屏幕上隐藏 div 2）：
<div class="col-md-4 col-sm-6">Column 1</div>
<div class="col-md-4 hidden-xs hidden-sm">Column 2</div>
<div class="col-md-4 col-sm-6 ">Column 3</div>
both of these will display full width on the xs size, but will display div 1 and 3 beside each other on small viewports and all three horizontally on medium and larger screens. you can also add a col-lg- in if you want a different display on large screens.
这两个都将在 xs 尺寸上显示全宽，但在小视口上将显示彼此并排的 div 1 和 3，在中型和较大屏幕上水平显示所有三个。如果您想在大屏幕上显示不同的显示，您还可以添加一个 col-lg-in。
EDIT - as per @Siavas comments - this solution requires Bootstrap 3 (link - https://getbootstrap.com/docs/3.3/css/#grid-example-basic)
编辑 - 根据@Siavas 的评论 - 此解决方案需要 Bootstrap 3（链接 - https://getbootstrap.com/docs/3.3/css/#grid-example-basic）
回答by Mahesh Chavda
Use class as this to your column divs : col-md-4 col-xs-12. So in case of laptop or desktop screen, it will display as three columns. However, in case of mobile view they will collapse to one.
将类用作您的列 divs : col-md-4 col-xs-12。因此，在笔记本电脑或台式机屏幕的情况下，它将显示为三列。但是，在移动视图的情况下，它们将折叠为一个。
<div class="col-md-4 col-xs-12">Column 1</div>
<div class="col-md-4 col-xs-12">Column 2</div>
<div class="col-md-4 col-xs-12">Column 3</div>
回答by agustin
You should read about responsive utilities.
您应该阅读有关响应式实用程序的信息。
For faster mobile-friendly development, you can use these utility classes for showing and hiding content by a device via media query. Also included are utility classes for toggling content when printed.
为了更快地进行移动友好的开发，您可以使用这些实用程序类通过媒体查询显示和隐藏设备的内容。还包括用于在打印时切换内容的实用程序类。
Demohttps://jsfiddle.net/nanilab/zx22szz7/
演示https://jsfiddle.net/nanilab/zx22szz7/
<div class="row">
<div class="col-md-4 col-xs-12"> Col 1 </div>
<div class="col-md-4 hidden-xs"> Col 2 </div>
<div class="col-md-4 col-xs-12"> Col 3 </div>
</div>
回答by Rinku Bhilota
add additional classes in the <div>where you have classes like col-md- or col-lg- and just add col-xs-12 over there and you will have full screen on smaller screens
<div>在您拥有 col-md- 或 col-lg- 之类的类的地方添加其他类，只需在那里添加 col-xs-12 即可在较小的屏幕上全屏显示
回答by Kira
In Bootstrap 4the hidden/visible properties got stripped for the display properties. The link might help in combination with "gavgrifs" answer. Missing visible-** and hidden-** in Bootstrap v4
在Bootstrap 4 中，隐藏/可见属性被剥离为显示属性。该链接可能有助于结合“gavgrifs”答案。 Bootstrap v4 中缺少 visible-** 和 hidden-**
This is an example for 3 equally sized colums. The middle column not displayed for xs and sm displays.
这是 3 个相同大小的色谱柱的示例。xs 和 sm 显示不显示中间列。
<div class="row">
<div class="col"> Col 1 </div>
<div class="col d-none d-md-block"> Col 2 </div>
<div class="col"> Col 3 </div>
</div>
