增加引导内容的高度 [英] Increase height of bootstrap content

问题描述

我有一个视频内容的div，它工作正常，但问题是，每次我尝试查看它如何适应不同设备时，视频的高度都会降低，我认为它是引导程序的正常行为，但事情是我需要该div来增加，当设备较小，我该怎么做？

i have a div that is a content for a video, and it is working fine, but the problem is, that everytime i try to see how it adapts on diferent devices the height of the video just decrease, i think it is the normal behaviour of bootstrap, but the thing is i need that div to increase when the devices are smaller, how can i do that?

这里是我的html的视频和内部文本

here is my html for the video and text inside

 <section class="content_section white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">


            <div id="video_overlays"></div>

            <div class="container vertical-center ">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2><span class="line"></span>Simple solutions for complex problems</h2>
                    </div>

                    <div class="description4 centered">
                        <p dir="ltr"><b id="docs-internal-guid-7b963bcb-e991-08ff-b846-612f8d57baee">The world is a complex place.&nbsp;</b><br><b>Our solutions are designed to allow organisations to quickly and simply use their information without adding layers and layers of heavy software.<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>

推荐答案

你可以使用媒体查询。假设持有你的视频播放器的div有id＃播放器。请注意下面使用的所有px和vh值仅作为示例。你可以将它们设置为你想要的。在下面的例子中，较小的设备使视频播放器的高度增加。

you can do it using media queries. Assuming that the div holding your video player has id #player. Note all the px and vh values used below are just for an example. you may set them as you want. In the below examples smaller devices have the video player with an increased height.

@media screen and (min-width: 1200px ) {
#player {
    height:500px; //or height:50vh
} 
}

上面的代码意味着对于宽度超过1200像素的屏幕尺寸，高度将为500像素（您可以将其设置为任何您想要的）

the above code means that for screen sizes having a width above 1200px the height will be 500px ( you can set it to whatever you want)

@media screen and (max-width: 1199px) and (min-width: 600px) {
#player {
    height:700px; //or height:70vh 
}
}

上面的代码意味着对于宽度在600像素和1199像素之间的屏幕尺寸，高度将为700像素。下面的代码表示屏幕分辨率低于600px，视频播放器的高度为800px。

the above code means that for screen sizes having a width between 600px and 1199px the height will be 700px. and the code below means for screen resolutions below 600px the height of the video player would be 800px.

@media screen and (max-width: 599px) {
#player {
    height:800px; //or height:80vh
}
}

详细了解媒体查询这里：
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Read more about media queries here : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

这篇关于增加引导内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！