Question

我有一个单行网格，一旦屏幕变得足够小，它应该可以将两个图像相互叠加。

它可以正常工作，但是，一旦屏幕变得太小，图像就不会居中。实际上，网格本身并不居中。

我尝试了许多方法，但是似乎没有任何效果。

我想要的是在屏幕变得太小时将两个图像放在屏幕中央。

所有代码都在组件内部。组件本身位于3列网格内（这是您看到的带有“左侧填充”和“右侧填充”标签的网格）。

这是我的代码。我更改了每个元素的背景颜色，所以我可以知道是什么。另外，我正在尝试以多种不同方式将所有内容居中：

<body class="justify-content-md-center" style="justify-content: center; align-items: center; background-color: blue">
            <div class="container justify-content-md-center" style="width: auto; justify-content: center; align-items: center; background-color: grey">
        <div class="container center" style="justify-content: center; background-color: yellow"> <!-- global canvas -->
            <div class="row no-gutters justify-content-md-center style="justify-content: center; background-color: red">



                <div class="col-sm" style="justify-content: center; background-color: green">
                        <img src="./images/fssFront.png" class="img-fluid" alt="Responsive image">
                </div>

                <div class="col-sm">
                    <div class="center-content">
                        <img src="./images/fssBack.png" class="img-fluid" alt="Responsive image">
                    </div>

                </div>
            </div>
        </div> <!-- global canvas -->
        </div>
    </body>

我对CSS，html和bootstrap非常陌生。我确定我缺少什么。

你能帮我吗？

谢谢。

Answer 1

如果我对问题的理解正确，则可以将样式属性flex-wrap: nowrap;添加到div <div class="row no-gutters justify-content-md-center">

默认情况下，引导程序中的行类具有属性flex-wrap: wrap; https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

Answer 2

感谢您的回答。

问题在于该组件本身位于col-sm类中，该类不会尝试适合屏幕。

现在可以使用：

<div class="container-fluid">

                Stuff on top

                <div class="container">
                    <div class="row">
                        <div class="col-sm">
                        Stuff to the left
                        </div>
                        <div class="col">
                            @component('components.fss') @endcomponent
                        </div>
                        <div class="col-sm">
                        Stuff to the right
                        </div>
                    </div>
                </div>

                Stuff below

</div>

很抱歉没有首先为您提供足够的信息。

再次感谢您。

干杯。

在引导程序中居中网格图像内容

2 个答案: