Question

我想在Bootstrap 4.2中创建一个简单的布局，在其中我有一个徽标，横幅，面包屑，菜单，内容和页脚-没什么特别的，它应该很标准。当然，它对于平板电脑和手机也应该有响应，但是当我了解网格系统时，我会解决这个问题。我已经读过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 -->

上面的布局在大视口中如下所示：

这看起来很奇怪，我一点也不理解，所以我有两个问题：

为什么这4行没有在水平方向上对齐？
如何使整个页面与中心水平对齐？
- 在Bootstrap网格系统中，我只使用了12列中的10列，因为我不想在大视口中使用整个页面（col-lg-2用于菜单，{{1 }}（内容）

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

由@ joykal-infotech提出的

解决方案是此JSFiddle：http://jsfiddle.net/1n95jLz2/

Answer 1

您的代码应为：Jsfiddle

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

Bootstrap 4.2，我的布局和行不在水平居中

1 个答案: