如何在引导程序中连续制作 3 个瓷砖答案

【问题标题】：how to make 3 tiles in one row in bootstrap如何在引导程序中连续制作 3 个瓷砖
【发布时间】：2018-02-19 11:03:42
【问题描述】：

我想在一行中显示 3 个图块。在移动视图中也应该排成一行。现在我只能在一行中看到 3 个图块，但在移动设备中它连续显示两个图块。如何制作 3 个图块应该覆盖完整的行和相同的 3 个图块，我还需要显示移动设备 .im 使用 adminlte 主题进行设计

代码笔

https://codepen.io/krishnakernel/pen/VQQyaV

 <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>64 &#8451;<sup style="font-size: 20px"></sup></h3>
                        <p><span>Oil Temperature</span></p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-thermometer-3"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>88<span style="font-size:30px">Amp</span></h3>
                        <p>R Current </p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-flash"></i>
                    </div>
                    <a href="" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>233 <span style="font-size:20px">&#9889;</span> </h3>
                        <p>R Voltage in kva</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-bolt"></i>
                    </div>
                    <a href="#" class="small-box-footer">
                        More info <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            </div>

【问题讨论】：

总和需要为12，例如lg，你需要改为4，因为你有3个lg的
删除所有内容，只保留col-xs-4

标签： html css twitter-bootstrap adminlte

【解决方案1】：

你没有正确关闭 div 换<div class="col-lg-3 col-xs-4">

【讨论】：

它无法在 3 行中显示 3 个 div。我只需要一行 3 个 div
你能告诉我如何减少div之间的差距。
.col-xs-4 { padding-left: 0;填充权：0； }

【解决方案2】：

尝试将类更改为col-xs-4，以获取您希望连续显示的所有元素。

【讨论】：

codepen.io/krishnakernel/pen/VQQyaV 正如你所说，我做了但没有工作
您在第一项的末尾有未关闭的标签
我附上的东西我没有得到。你能修改我的codepen代码吗
您的 html 代码中有标签“>”。您需要将其更改为“
”，它会起作用。它就在第二个元素之前。

【解决方案3】：

在 bootstrap 中，grid summ 需要等于 12。那么如果你想让 xs 成为一行，你需要更改为 col-xs-4，因为你只有 3 个 div。

在此处查看更多信息：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

【讨论】：

【解决方案4】：

如果您希望布局始终为三列，请使用 xs 断点。不同的断点旨在根据屏幕大小更改布局。

【讨论】：