Question

我正在尝试学习bootstrap，并建立了一个顶部有视频背景，下面有文字的网站。 当我将桌面尺寸屏幕缩小到移动尺寸时，视频和正文之间会出现很大差距。任何帮助都会对我学习boostrap有所帮助！非常感谢。

我怀疑这是填充或边缘问题？但是，当我使浏览器窗口变小时，为什么会扩展更多呢？

HTML：

<body>
    <div class = "container-fluid">
        <div class = "row">

        <div class = "header-container">
            <div class = "video-container">
                <div align="center" class="embed-responsive embed-responsive-16by9">
                      // video code removed (for succinctness)
                </div> <!-- video responsiveness -->
            </div> <!-- video-container -->

            <div class = "col-md-12 text-center">
                <h3> 
                    TEXT
                </h3>
            </div>

            </div> <!-- header-container -->
            </div> <!-- row -->
        </div> <!-- container -->

    <section id="services">
        <div class="row">
             <div class="col-sm-3 col-sm-offset-2" id="red">
                  <h2 class="text-center">
                  Services
                  </h2>

                  <p class="text-justify">
                    // BODY TEXT removed (for succinctness)
                  </p>
             </div>

CSS：

.header-container {
    width: 100%;
    height: 700px;
    border-left: none;
    border-right: none;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

video { max-width: 100%; min-width: 100%; min-height: 100%; }

#services{
    background-color: white;
    height: 25px;
}

Answer 1

这似乎不是填充或边距问题。

您在header-container课程中添加了一些指定明确身高的自定义CSS ，即700px。但是，与此同时，您通过指定Bootstrap的embed-responsive类等将视频放在响应容器中。

这实质上意味着视频，IFRAME或您在响应式容器中放置的任何内容都会响应屏幕的大小，即随着窗口尺寸的减小，内容也会减少。随着屏幕变小，容器中实际高度将会缩短，可能比700px短很多;多短，只取决于宽高比。您可以强制执行min-height，指定auto或简单地更改设计以更自然地流动，只需根据需要应用底部/上边距。

Bootstrap: Responsive embed

Answer 2

可能会发生这种情况，因为您已经在使用bootstrap类嵌入响应并再次为视频标记定义样式。尝试删除视频标记的样式或仅删除最小高度标记。这可能导致问题

Answer 3

更改header-container css类的高度。

height: 700px;

变化

height: auto;

Answer 4

您可能不得不使用媒体查询来调整容器.head-container大小。

尝试类似：

＆＃13;

@media (max-width: 1170px) {
    .header-container {
        height: 250px;
    }
}

＆＃13;

Bootstrap：太多间距（无响应）

4 个答案: