如何在 bootstrap 中将 3 个瓷砖排成一行

Question

我想在一行中显示 3 个图块。在移动视图中，3 个图块应该排成一行 also.now 我只能在一行中看到 3 个图块，但在移动设备中，它连续显示两个图块。如何制作 3 个图块应该覆盖完整的行和相同的 3 个图块我也需要显示移动设备。我使用 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>

Answer 1

尝试将您希望在一行中显示的所有元素的类更改为 col-xs-4。

Answer 2

您没有正确关闭 [=14th=] 改变 <div class="col-lg-3 col-xs-4">

Answer 3

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

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

Answer 4

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

如何在 bootstrap 中将 3 个瓷砖排成一行

how to make 3 tiles in one row in bootstrap

html

css

twitter-bootstrap

adminlte