在引导程序中居中网格图像内容[重复]答案

【问题标题】：Centering grid image content in bootstrap [duplicate]在引导程序中居中网格图像内容[重复]
【发布时间】：2019-03-25 06:09:22
【问题描述】：

我有一个单行网格，一旦屏幕变得足够小，它应该将两个图像放在一起。

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

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

我想要的只是当屏幕太小时两个图像在屏幕上居中。

所有代码都在一个组件内。并且组件本身位于 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 还是很陌生。我确定我错过了什么。

你能帮帮我吗？

谢谢。

【问题讨论】：

从 justify 类中取出md。它以任何比这更大的东西为中心。

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

【解决方案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>

很抱歉一开始没有给你足够的信息。

再次感谢您。

干杯。

【讨论】：