Question

我对引导行/单元格的位置有疑问。

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

这是它的外观：

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>

Bootstrap破坏生产中的行单元

1 个答案: