Question

我想在一行中显示3个图块。在移动视图中，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>

Answer 1

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

Answer 2

尝试将要显示的所有元素的类更改为col-xs-4。

Answer 3

在bootstrap中，网格summ必须等于12.然后，如果你想让xs成为一行，你需要更改为col-xs-4，因为你只有3个div。

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

Answer 4

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

如何在bootstrap中一行制作3个tile

4 个答案: