css - Bootstrap 4.2 和我的布局和行不是水平居中的

Question

我想在 Bootstrap 4.2 中创建一个简单的布局，其中有 Logo 、横幅、面包屑导航、菜单、内容和页脚 - 这没什么特别的，它应该是非常标准的。它当然也应该对平板电脑和手机有响应，但是当我了解网格系统时我会解决这个问题。我读过 grid documentation和 display properties并尝试了几天来理解这一点，但遗憾的是我没有做对，所以我会很感激一些提示我做错了什么。

我有这个当前代码:

<!-- Top container -->
<div class="container">

    <!-- Sticky top for Logo + Banner + Breadcrumb -->
    <div class="row sticky-top">

        <!-- ----------------------------------------------------------- -->
        <!-- Row 1, Logo + Banner -->

        <!-- Logo -->
        <div class="row col-lg-2 bg-primary">
            Logo
        </div>

        <!-- Banner -->
        <div class="row col-lg-8 bg-warning">
            Banner
        </div>

        <!-- ----------------------------------------------------------- -->
        <!-- Row 2, Breadcrumb -->

        <!-- Breadcrumb -->
        <div class="row col-lg-10 bg-secondary">
            Breadcrumb
        </div>

    </div> <!-- Sticky top for Logo + Banner + Breadcrumb -->

    <!-- ----------------------------------------------------------- -->
    <!-- Row 3, Menu + Content -->

    <!-- Menu + Content -->
    <div class="row">

        <!-- Menu -->
        <div class="col-lg-2 bg-success">
            Menu
        </div>

        <!-- Content -->
        <div class="col-lg-8 bg-info">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>

    </div> <!-- Menu + Content -->

    <!-- ----------------------------------------------------------- -->
    <!-- Row 4, Footer -->

    <!-- Footer -->
    <div class="col-lg-10 bg-danger">
        Footer
    </div>

    <!-- ----------------------------------------------------------- -->

</div> <!-- Top container -->

上面的布局在大视口(viewport)中看起来像这样:

这看起来很奇怪，我根本不明白这一点，所以我有以下几个问题:

• 为什么 4 行没有彼此水平对齐？
• 如何使整个页面水平居中对齐？
  • 我只使用了 Bootstrap 网格系统中 12 列中的 10 列，因为我不想在大 视口(viewport)(col-lg-2 用于菜单和 col-lg-8 用于内容)

我有一个 JSFiddle - 请在最大化窗口中查看它:http://jsfiddle.net/0tw2dk3o/

---

解决方案 @joykal-infotech 提出的是这个 JSFiddle:http://jsfiddle.net/1n95jLz2/

Answer 1

您的代码应如下所示:Jsfiddle

您错过了 row 和 column 类的排序和格式设置。