2

让我们使用引导程序定义以下布局：

<div class="container-fluid">

    <div onclick="smallSize()">Click</div>
    <div onclick="largeSize()">Click</div>

    <div class="row">

        <!--Video player-->
        <div class="video-player-content col-7" style="max-width:720px;">
            <video id="preview" width="720px" height="360px">
                <source/>
            </video>
        </div>

        <!--Sidebar content-->
        <div class="sidebar-card col-5">
            <p>Some content</p>
        </div>  

    </div>

</div>

我有 2 个图标用于更改视频播放器的大小，类似于 youtube 的功能。单击它们会更改视频播放器的大小，我使用 JQuery 来实现这一点。

function smallSize() {
    var video = document.getElementById("preview");
    video.height = 360;
    video.width = 720;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "720";
}

function largeSize() {
    var video = document.getElementById("preview");
    video.height = 540;
    video.width = 1080;
    document.getElementsByClassName("video-player-content")[0].style.maxWidth = "1080";
}

我的问题是，当更改为大型播放器时，视频播放器 col 溢出（实际上是下溢）侧边栏。如果用户选择在较大的播放器上观看视频，如何将侧边栏推到视频播放器下方？我尝试使用 col-sm-md-lg 并尝试了 clearfix，但没有成功。定义 maxwidth 属性很重要，因为视频顶部还有一个画布。

4

1 回答 1

0

最终我意识到可以使用 jQuery 添加和删除类，所以我在我的两个 onClick 函数中都使用了以下方法

$("<id of element>").removeClass("<class to be removed>");
$("<id of element>").addClass("<class to be added>");
于 2021-01-07T01:20:01.247 回答