Bootstrap 容器未居中

Question

我无法使用 bootstrap 将容器水平居中，方法是将 mx-auto 应用于容器属性或遵循 this post.[=17 上提供的解决方案=]

考虑到我已经按照链接 post?

中的描述通过 bootstrap 列系统指定了等于 'margins'，为什么下面的代码不起作用

<div class="container">
    <h1>Example</h1>
    <h3>A collection of my best <a href="academic_portfolio.html">academic</a> and <a
            href="professional_portfolio.html">professional</a> work.</h3>
    <div class="row">

        <div class="col-md-1"></div>
        <div class="col-md-10"><img alt="img desc" src="img.jpg"></div>
        <div class="col-md-1"></div>
    </div>

最初，我的代码显示为：

<div class="container">
    <div class="row ">
        <h1>Example</h1>
        <div class="row ">
            <h3>A collection of my best <a href="academic_portfolio.html">academic</a> and <a
                    href="professional_portfolio.html">professional</a> work.</h3>
            <div class="row justify-content-center">
                <div class="col align-self-center">
                    <img alt="img desc" src="img.jpg">
                </div>
            </div>
        </div>

我是 bootstrap 的新手，但在阅读了有关 containers and columns 的文档后，我不确定问题出在哪里，因为这是一个非常简单的布局。似乎所有元素都有某种左填充，阻止它们适当地居中：

Answer 1

在我的例子中，这个问题是因为图像大小超出了行的限制，调整图像大小解决了问题。

Bootstrap 容器未居中

Bootstrap container not centered

twitter-bootstrap