Css 阻止引导列垂直列出

我希望这样，当屏幕宽度变小时，我的行中的列不再垂直堆叠，而是缩小以适应屏幕

目前我有：

<div class="row">
<div class="col-lg-6 col-lg-offset-3">
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-code"></i>
        <br/>
        <kbd class="headingkbd">Heading 1</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-laptop"></i>
        <br />
        <kbd class="headingkbd">Heading 2</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-coffee"></i>
        <br />
        <kbd class="headingkbd">Heading 3</kbd>
    </div>
</div>

标题1


标题2


标题3

---

当屏幕大小达到最小值时，如何阻止列自动堆叠，而是缩小它们以适应屏幕？

根据屏幕大小和引导提供的媒体查询，您可以更具体地使用类

比如：

标题1


标题2


标题3

您可以指定每个元素的宽度，也可以指定所有元素的宽度

文档说明，您必须将

行

包装在

容器

中，然后直接在

div.row

中开始定义div。

这不是必需的，除非是有意的

因此，使用以下方法：

col lg适用于大屏幕（lg）

col md用于中等屏幕（md）

列sm用于中小型屏幕（sm）

列xs用于超大屏幕（xs）

我们可以定义我们的布局

现在，在您的情况下，您希望所有三个元素始终保持在中间，您可以通过指定<代码> COL-XS4/CODE>所有这些元素。

.headerBlock{
文本对齐：居中；/*使内联元素居中*/
}

标题1


标题2


标题3

高度方面？或者你是指宽度？对不起，是的，我是指宽度。编辑。

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-code"></i>
            <br/>
            <kbd class="headingkbd">Heading 1</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-laptop"></i>
            <br />
            <kbd class="headingkbd">Heading 2</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-coffee"></i>
            <br />
            <kbd class="headingkbd">Heading 3</kbd>
        </div>
    </div>
</div>