根据浏览器大小缩放HTML页面

Question

我正在尝试构建一个页面，该页面必须适用于浏览器的任何大小并适当缩小。我目前正在使用引导程序框架，但如果有更好的东西，我就不会依赖它。

这个想法是一个客户满意度调查，将在平板电脑上填写，无法滚动等。

目前我有我的HTML：

<div class="row">
    <div class="col-lg-12">
        <h1>How are we doing?</h1>
    </div>
</div>
<div class="col-lg-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">How was the cleanliness today?</h3>
        </div>
        <div class="panel-body">
            <center>
                <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div>
            </center>
        </div>
    </div>
</div>

这样可行，但当然不考虑页面高度等因此会使其滚动。 img-responsive类会根据宽度适当调整图像的大小，但如果可以考虑高度，它会很好。

我尝试了一系列的事情，例如将身高设置为height:100vh; 但我无法缩小以适应页面。目前它看起来像：

我希望它看起来像（显然不是这种扭曲，糟糕的mspaint工作）：

Answer 1

您的<div class="panel-body">包含1个孩子且center，其他<div class="panel-body">个孩子会变得像蹩脚的脸，摆脱center标记

<div class="row">
    <div class="col-lg-12">
        <h1>How are we doing?</h1>
    </div>
</div>
<div class="col-lg-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">How was the cleanliness today?</h3>
        </div>
        <div class="panel-body">

  

                <div class="col-xs-2"><img src="img/5.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/4.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/3.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/2.png" alt="" class="img-responsive"></div>
                <div class="col-xs-2"><img src="img/1.png" alt="" class="img-responsive"></div>

  

        </div>
    </div>
</div>  

您应该按照示例进行操作 Bootstrap#Panels
如果您选择添加标签，那么它将采取不同的行动

编辑： 还要看看你的网格布局是什么，它可以开始.container（固定宽度）或.container-fluid（全宽） Bootstrap#Grid