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

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

在引导网格中,默认情况下,您的列都是100%宽.使用col-<size>-<number>类来覆盖它.的<size>可以是xs,sm,md,或lg,并且是指最小屏幕宽度为该类适用.这<number>是一个从1到12的数字,指的是您的内容应该是宽的列数.

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

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

您可以这样做,以便在移动设备上,每行有一对,但在平板电脑上,每行有两个,而在台式机上,每行有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>

有关更多详细信息,请参阅bootstrap网格系统文档.