css - 阻止 Bootstrap 列垂直列出

Question

我希望做到这一点，以便当屏幕在宽度方向上变小时，而不是我行中的列垂直堆叠，它们会缩小以适合屏幕。

目前我有这个:

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

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

Answer 1

您可以根据屏幕大小和 bootstrap 提供的媒体查询对类进行更具体的设置。

类似于 this :

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