Question

我建立了一个简单的引导网站，但是当调整浏览器的大小或在其他设备上查看浏览器时，却无法响应。我已经为“ 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尺寸，我希望视频垂直排列，并将其设置为左列消失的位置。因此，我几乎不希望在调整大小时留有空格，并且与在大视图中保持空白一样，直到它们变为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;

}

调整浏览器大小或在其他设备上时，Bootstrap没有响应

1 个答案: