代码之家 › 专栏 › 技术社区 › Nezir

生产中的Bootstrap中断行单元格

cell row grid twitter-bootstrap css

Nezir · 技术社区 · 7 年前

引导行/单元格位置有问题。

我在一行生成6个col,在本地dev env上我没有这个问题,但是在生产上,一个单元格被移到第三行。

以下是它的外观:

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>

1 回复 | 直到 7 年前

95faf8e76605e973 7 年前

你可以只排两行而不是一行

每一列都有 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>