当浏览器被调整大小或在不同的设备上时，引导程序没有响应

Question

我建立了一个简单的引导网站，当调整浏览器大小或在其他设备上查看浏览器时，我遇到了让它响应的问题。我已经添加了不同大小的大小，如"lg，sm，md，xs"等，但它仍然不起作用。其中一个问题是，我有4个视频div，它们的宽度似乎比顶部的视频稍长。这是问题的图片

以下是调整浏览器大小时的网站片段

当调整浏览器大小时，假设视频与设备/浏览器的底部对齐，顶部视频填充其余部分。如果使用xs大小，我希望视频垂直排列，并将其设置为左列消失的位置。所以，在调整大小时，我几乎不希望有空格，并保持与大视图中的空格相同，但直到它们变为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

尝试删除左边的填充：0；

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

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

}