css - Bootstrap 破坏了生产中的行单元格

Question

我对 bootstrap 行/单元格位置有疑问。

我在一行中生成 6 列，在我的本地开发环境中我没有这个问题，但在生产中，一个单元格被移动到第三行。

这是它的样子:

https://screenshots.firefox.com/byRFg1d6kWAPKbc0/www.javascript.ba

这里还有html:

我的目标是将这六个单元格排成两行

<div class="sections">
        <h2 class="heading">Most Viewed News Today</h2>
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <!-- Video Box Start -->
        <div class="videobox2">
            <figure>
                <!-- Video Thumbnail Start --> 
                <a href="/posts/the-best-node-js">
                    <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
</a>                <!-- Video Thumbnail End -->
                <!-- Video Info Start -->
                <div class="vidopts">
                    <ul>
                        <li><i class="fa fa-eye"></i>43</li>
                        <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <!-- Video Info End -->
            </figure>
            <!-- Video Title Start -->
            <h4><a href="/posts/the-best-node-js">The Best Node.js </a></h4>
            <!-- Video Title End -->
        </div>
        <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/quasar-framework">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>24</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/quasar-framework">Quasar Framework</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/dependency-injection-smart-table-advanced-patterns">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>5</li>
                                <li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/dependency-injection-smart-table-advanced-patterns">Dependency Injection &amp; Smart Table: Advanced Patterns</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/the-best-node-js">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/058/original/open-uri20180902-27786-uhm319.jpg?1535909323">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>43</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/the-best-node-js">The Best Node.js </a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/quasar-framework">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/053/original/open-uri20180902-27786-1f5glft?1535899755">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>24</li>
                                <li><i class="fa fa-clock-o"></i>02:14 02/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/quasar-framework">Quasar Framework</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <!-- Video Box Start -->
                <div class="videobox2">
                    <figure>
                        <!-- Video Thumbnail Start --> 
                        <a href="/posts/dependency-injection-smart-table-advanced-patterns">
                            <img alt="" class="img-responsive hovereffect height14em" src="/system/posts/images/000/000/024/original/javascript1.jpg?1535792343">
        </a>                <!-- Video Thumbnail End -->
                        <!-- Video Info Start -->
                        <div class="vidopts">
                            <ul>
                                <li><i class="fa fa-eye"></i>5</li>
                                <li><i class="fa fa-clock-o"></i>08:08 01/09/18</li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!-- Video Info End -->
                    </figure>
                    <!-- Video Title Start -->
                    <h4><a href="/posts/dependency-injection-smart-table-advanced-patterns">Dependency Injection &amp; Smart Table: Advanced Patterns</a></h4>
                    <!-- Video Title End -->
                </div>
                <!-- Video Box End -->
            </div>

        </div>
    </div>

Answer 1

你可以只做 2 行而不是 1 行

每列都有 col-lg-4 col-md-4 col-sm-4 col-xs-12(所以每行会有 3 个“单元格”)——当然在较小的屏幕上你必须调整，因此 col-xs-12

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>

<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"><img src="https://picsum.photos/200"></div>
</div>