html - 调整浏览器大小时或在不同设备上 Bootstrap 无响应

Question

我构建了一个简单的 Bootstrap 网站，但在调整浏览器大小或在不同设备上查看时，我无法让它做出响应。我已经添加了不同尺寸的尺寸，如“lg、sm、md、xs”等，但它仍然无法正常工作。问题之一是我有 4 个视频 div，它们的宽度似乎比顶部的视频稍长。 Here is am image of that problem

Here is an snippet of the website when the browser is resized

当浏览器调整大小时，应该发生的是视频应该与设备/浏览器的底部保持对齐，顶部视频填充其余部分。如果你选择 xs 大小，我希望视频垂直排列，我将其设置为左栏消失的位置。所以我几乎不希望在调整大小时有空格，并保持与在大 View 中一样，但直到它们变成 xs 大小。这是我的代码的链接 https://codepen.io/anon/pen/rrVmVb

<div class="container-fluid">
        <div class="row no-gutter">
            <nav class="col-lg-2 col-md-2 col-sm-2 col-xs-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">
                    <h1>test</h1><hr />

                </div>
                <!--sticky footer-->
                <footer class="footer">
                    <div>
                        <p align="center">
                            <a href="index.html">Home</a> | <a id="lang_selected"><b>English</b></a> | <a href="es/irma.html">Español</a>
                    </div>
                </footer>
            </nav>
        </div>

        <div class="row no-gutter">

        <main role="main" class="col-lg-10 col-md-10 ml-sm-auto">
            <div class="embed-responsive embed-responsive-16by9">
                <video autoplay loop class="embed-responsive-item" controls="controls">
                    <source id="source_video" src="" type="video/mp4">
                </video>
            </div>
            <div class="row no-gutter">
                <div class="col-sm-3">
                    <div class="well">
                        <div align="center" class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="firstVideo()">
                                <source src="" type="video/mp4">
                            </video>
                        </div>

                    </div>
                    <p id="testText">this is sometext</p>
                </div>
                <div class="col-sm-3">
                    <div class="well">
                        <div align="center" class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="secondVideo()">
                                <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="well">
                        <div align="center" class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="thirdVideo()">
                                <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="well">
                    <div align="center" class="embed-responsive embed-responsive-16by9">
                        <video autoplay loop class="embed-responsive-item" controls="controls" onclick="fourthVideo()">
                            <source src="" type="video/mp4">
                        </video>
                    </div>
                        </div>
                </div>
            </div>
        </main>
            </div>
    </div>

Answer 1

尝试删除 padding-left:0;

.no-gutter > [class*='col-']{

padding-right:0;

padding-top:0;
padding-bottom:0;