页面未缩放到更大的屏幕尺寸

Question

我是一个新手，我真的需要帮助解决这个问题。我正在尝试使用引导程序开发单页网站。它适用于我的笔记本电脑屏幕尺寸，但是当我在 1280px x 1024p 的较大液晶显示器上查看它时，页面不会缩小以填充视口。

这是我的代码Code的链接

谁能告诉我我做错了什么？

Answer 1

您的网站不会填满整个屏幕，因为您只使用了col-lg-8。引导程序的.row 类最多可以包含 12 列，而您只使用了 8 列。因此，如果您希望它占据整个屏幕，您可能需要将其更改为 col-lg-12。

但即便如此，轮播也不会占据整个屏幕，因为您使用的是container 类。如果你希望它使用（几乎）整个屏幕宽度，你应该使用container-fluid。

所以你的 sn-p 的第一部分应该是这样的：

<div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-6 col-lg-12"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol>

Answer 2

由于您希望根据窗口高度发生某些事情，因此您将需要 CSS media queries。根据屏幕大小，媒体查询将自行表达。给你一个例子如下：

CSS：

@media screen and (max-height: 480px) {
    .col-lg-8 {
        background-color: red;
    }
}

@media screen and (max-height: 380px) {
    .col-lg-8 {
        background-color: blue;
    }
}

如果您将其放入链接样式表并垂直缩放网站，您可以看到带有class="col-lg-8" 的div 标记将变为红色或蓝色。现在你必须自己看看你想要边界去哪里。