更改大小时，将引导列保留在同一行中

Question

我有一个有两列的div - 一个包含一个glyphicon，另一个包含文本。在较大的尺寸下，这可以正常工作：

但是当浏览器的宽度较小（或移动）时，列会分开，最终看起来像这样：

有没有办法强制列在一行中保持在一起？即使在最窄的尺寸下，两个柱子都有足够的空间。

这是我的单行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>

CSS是标准引导程序（i类是FontAwesome glyphicon）。

Answer 1

使用col-xs-*网格类。

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

在引导网格中，默认情况下，您的列都是100％宽。使用col-<size>-<number>类来覆盖它。 <size>可以是xs，sm，md或lg，也可以指应用该类的最小屏幕宽度。 <number>是1到12之间的数字，表示您的内容应该是列宽。

所以，也许你的内容非常广泛，它应该只在桌面浏览器上并排显示。您可以提供内容class="col-md-6"，只要浏览器窗口的宽度至少为992像素，它就会并排显示。

但是，对于您而言，由于您的内容非常小，您希望它始终并排显示，因此您应该使用col-xs-<number>类。

你可以这样做，以便在移动设备上，每行有一对，但在平板电脑上每行有两个，而在台式机上每行有3个：

＆＃13;

＆＃13;

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请参阅bootstrap Grid System documentation。

Answer 2

class="col-md-2 col-xs-2"和class="col-md-10 col-xs-10"

您可以组合元素的类，使其根据屏幕大小以某种方式运行。您可以执行class="col-md-2 col-xs-6"和class="col-md-10 col-xs-6"等操作...