Fatal编程技术网
  • css/
  • Css 如何使bootstrap 3面板的水平列表响应？

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

css twitter-bootstrap

Css 如何使bootstrap 3面板的水平列表响应？,css,twitter-bootstrap,Css,Twitter Bootstrap,我正在使用Bootstrap3并努力创建一个面板的水平列表。我的HTML如下所示。它在所有浏览器中呈现良好，但在移动分辨率下，文本没有响应。你知道我遗漏了什么吗 <body> <div class="container"> <div class="row"> <div class="col-xs-2"> <div class="panel panel-primary">

我正在使用Bootstrap3并努力创建一个面板的水平列表。我的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>


喷水灭火系统
测试和检查
我是一个诚实的人。比如乌特罗克人的对手，我们的顾问。
前往小组
我是一个诚实的人。比如乌特罗克人的对手，我们的顾问。
前往小组
我是一个诚实的人。比如乌特罗克人的对手，我们的顾问。
前往小组
我是一个诚实的人。比如乌特罗克人的对手，我们的顾问。
为了便于移动，您应该在较低分辨率下使用不同的列大小。单词太长，无法放入col-xs-2中。您可以通过给它两类col-xs-6和col-sm-3来保持4列布局。一旦达到较小的分辨率，列将被适当地重新排列

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

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

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

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

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

</div>
文本不应该转到下一行而不是以小分辨率显示在面板上吗？文本将转到空格上的下一行。但是，当一个单词包含多个字符时，它不会拆分该单词。col-2使用宽度%值。因此，当屏幕缩小时，宽度也会缩小，从而导致单词粘在面板外。列布局可用于在特定分辨率下增加列的宽度。这就是为什么我建议切换到col-xs-6，它将在该分辨率下提供50%的宽度，而不是17%的宽度。你能给我一个例子或一个链接，告诉我如何在较低分辨率下随列的宽度增加文本不应该进入下一行，而不是以小分辨率出现在面板上吗？文本将进入下一行在空间上。但是，当一个单词包含多个字符时，它不会拆分该单词。col-2使用宽度%值。因此，当屏幕缩小时，宽度也会缩小，从而导致单词粘在面板外。列布局可用于在特定分辨率下增加列的宽度。这就是为什么我建议切换到col-xs-6，它将在该分辨率下提供50%的宽度，而不是17%的宽度。你能给我一些例子或链接，告诉我如何在较低分辨率下随列宽度增加吗