col-lg-2 col-md-4 col-6在引导程序4上不起作用。在移动视图下，它们以col-md-4而不是col-6出现

Question

<div class="container">
  <div class="row space">
         <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-sm-12 col-md-4 col-lg-2">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>

这是代码，在大屏幕上，它们显示为col-2，而在中小屏幕上，它们显示为col-4。

Answer 1

您可能正在其他尺寸的设备上进行检查。如果您需要将CSS用于超小型设备，请使用col-6（上面的代码中没有）而不是col-sm-6。或两者皆可根据您的要求。请找到使用引导程序网格布局的准则。

Bootstrap 4网格系统具有五个类：

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

在您的代码中，您可以执行此操作。 
<div class="container">
  <div class="row space">
         <div class="col-lg-2 col-md-4 col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="background.jpeg" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
        <div class="col-lg-2 col-md-4  col-sm-6 col-6">
            <a href="#"><img src="" class="img-thumbnail"></a>
            <p class="text-center">
                <label>Description</label>
            </p>
        </div>
</div>
</div>