Question

我正在使用Bootstrap 3，并努力使面板的水平列表响应。我的HTML如下。它在所有浏览器中呈现良好，但在移动分辨率下，文本没有响应。我缺少什么想法？

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Sprinkler System <br />Test & Inspection</h3>
                </div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
                </div>
            </div>
        </div>
        <div class="col-xs-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Heading for panel</h3>
                </div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
                </div>
            </div>
        </div>
        <div class="col-xs-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Heading for panel</h3>
                </div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
                </div>
            </div>
        </div>

        <div class="col-xs-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Heading for panel</h3>
                </div>
                <div class="panel-body">
                    Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Answer 1

为了使其适合移动设备，您应该在较低分辨率下使用不同的列大小。单词太长，无法容纳在col-xs-2中。你可以通过给它两类col-xs-6和col-sm-3来保持4列布局。一旦达到较小的分辨率，列将被适当地重新排列。

包含面板的div应该在每个面板中将类更改为这样。将为您提供xs分辨率的2列布局和4以及

的列布局

ls -l --

如果面板在重新排列时未能正确对齐较低分辨率，则可能会解决问题： Bootstrap fluid row columns with different height

你只需要添加css类

<div class="col-xs-6 col-sm-3">

</div>

如何使bootstrap 3面板的水平列表响应？

1 个答案: