html - 如何在 Bootstrap 中将 3 个瓷砖排成一排

Question

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

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