Question

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

以下是我的代码Code

的链接

有人可以告诉我这里我做错了吗？

Answer 1

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

但即使这样，旋转木马也不会占用enitre屏幕，因为你使用的是container类。如果您希望它（几乎）使用屏幕的整个宽度，您应该使用container-fluid。

因此，您的代码段的第一部分应如下所示：

<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">  <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;
    }
}

如果您将其放在链接的样式表中并垂直缩放网站，则可以看到带有div的{{1}}代码会变为红色或蓝色。现在，你必须亲自去看你想要边界的地方。

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

2 个答案:

CSS：