CSS 更改大小时将引导列保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30878974/
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
Keep bootstrap columns in same row when changing size
提问by EmmyS
I have a div that has two columns - one holds a glyphicon, the other holds text. At larger sizes, this works correctly:
我有一个有两列的 div - 一列包含字形，另一列包含文本。在较大的尺寸下，这可以正常工作：
But when the browser is at a smaller width (or mobile), the columns split, and it ends up looking like this:
但是当浏览器的宽度（或移动）较小时，列会分开，最终看起来像这样：
Is there any way to force the columns to stay together in a single row? There's plenty of room for both columns, even at the narrowest size.
有没有办法强制列在一行中保持在一起？两列都有足够的空间，即使是最窄的尺寸。
Here's my HTML for a single row:
这是我的单行 HTML：
<div class="row">
<div class="col-md-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
<div class="col-md-10">
<p>Zero Day Protection</p>
</div>
</div>
The CSS is standard bootstrap (the iclass is a FontAwesome glyphicon).
CSS 是标准引导程序（i该类是一个 FontAwesome glyphicon）。
回答by gilly3
Use the col-xs-*Grid classes.
使用col-xs-*Grid 类。
<div class="row">
<div class="col-xs-2"><i class="fa fa-check fa-2x fa-fw"></i></div>
<div class="col-xs-10">
<p>Zero Day Protection</p>
</div>
</div>
In a bootstrap grid, your columns are all 100% wide by default. Use the col-<size>-<number>classes to override that. The <size>can be either xs, sm, md, or lg, and refers to the minimum screen width for that class to apply. The <number>is a number from 1 to 12 and refers to the number of columns wide your content should be.
在引导网格中，默认情况下您的列都是 100% 宽的。使用col-<size>-<number>类来覆盖它。的<size>可以是xs，sm，md，或lg，并且是指最小屏幕宽度为该类适用。的<number>是一个数字，从1到12，指的是列数宽的内容应该是。
So, maybe you have really wide content, and it should only be displayed side by side on desktop browsers. You could give your content class="col-md-6"and it would display side by side as long as the browser window is at least 992 pixels wide.
所以，也许你有非常广泛的内容，它应该只在桌面浏览器上并排显示。您可以提供您的内容class="col-md-6"，只要浏览器窗口的宽度至少为 992 像素，它就会并排显示。
But, for you, since your content is really small, you want it always to display side by side, so you should use col-xs-<number>classes.
但是，对于您来说，由于您的内容非常小，您希望它始终并排显示，因此您应该使用col-xs-<number>类。
You could make it so that on mobile, you have one pair per line, but on tablets you have two per line, and on desktops you have 3 per line:
您可以设置为在移动设备上，每行一对，但在平板电脑上，每行有两个，而在台式机上，每行有 3 个：
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Adaptive Updates</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Online Support and Knowledge Base</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Direct Support</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Enterprise Management Console</p>
</div>
<div class="col-xs-3 col-sm-2 col-md-1"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-9 col-sm-4 col-md-3">
<p>Zero Day Protection</p>
</div>
</div>
</div>See the bootstrap Grid System documentationfor more detail.
有关更多详细信息，请参阅引导网格系统文档。
回答by Deja Vu
class="col-md-2 col-xs-2"and class="col-md-10 col-xs-10"
class="col-md-2 col-xs-2"和 class="col-md-10 col-xs-10"
You can combine classes for the element to make it behave certain way based on screen size. You can do something like class="col-md-2 col-xs-6"and class="col-md-10 col-xs-6"etc...
您可以为元素组合类，使其根据屏幕大小以某种方式运行。你可以不喜欢class="col-md-2 col-xs-6"和class="col-md-10 col-xs-6"等...
