时间戳

首页 > 解决方案 > 使用 Boostrap 连续 4 列

html - 使用 Boostrap 连续 4 列

问题描述

我正在使用 Bootstrap 4.5.1 显示 4 列，如下所示。

我的 4 列的实际显示。

1

我希望这 4 列在一行中对齐（它们不应该换行）。

这是代码：

html

<div class="container flex-nowrap">
            <div class="featured-boxes">
                <div class="row">
                    <a href="<?= $this->Url->build(['controller' => 'Academy' , 'action' => 'index', 'language' => $this->request->getSession()->read('Config.language')]); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-graduation-cap"></i>
                                    <h4 class="text-uppercase"><?= __('Academy'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('academy.png', ['alt' =>  __('Academy'), 'class' => 'img-responsive img-rounded']); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Esports' , 'action' => 'index', 'language' => $this->request->getSession()->read('Config.language')]); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-gamepad"></i>
                                    <h4 class="text-uppercase"><?= __('Esports'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('esports.png', ['alt' => __('Esports')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Posts','action' => 'view','bar']); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-trophy"></i>
                                    <h4 class="text-uppercase"><?= __('Events'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('events.png', ['alt' => __('Events')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="<?= $this->Url->build(['controller' => 'Posts','action' => 'view','bar']); ?>">
                        <div class="col-sm">
                            <div class="featured-box featured-box-primary featured-box-effect-1 mt-xlg" style="height: 358px;">
                                <div class="box-content">
                                    <i class="icon-featured fa fa-group"></i>
                                    <h4 class="text-uppercase"><?= __('Gaming'); ?></h4>
                                    <p><?= __(''); ?></p>
                                    <?= $this->Html->image('gaming.png', ['alt' => __('Gaming')]); ?>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

编辑：

我修改了代码以对行中的每一列使用col-sm-3而不是col-sm 。但是现在，这些盒子不再响应了。为什么？

这是通过为每一列设置col-sm col-md-3来缩小窗口时得到的结果：

结果

编辑2： *

我通过对图像使用 Boostrap img-fluid类解决了我的问题。

我怎样才能做到这一点？

标签： htmlbootstrap-4

解决方案

一行由 12 列组成，覆盖整个屏幕。如果你想有 4 列，每列应该有 3 个空格。要使用的类应该是 col-sm-3

<div class="row">
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3"></div>
</div>

推荐阅读