引导容器、网格行宽和填充问题答案

【问题标题】：Bootstrap container, grid rows width and a padding issue引导容器、网格行宽和填充问题
【发布时间】：2018-06-07 07:27:36
【问题描述】：

我正在创建我的第一个引导前端，但遇到了一些我无法解决的问题：

行扩展到容器的整个宽度，最大列宽（12个单位）不会扩展到这个宽度：

进一步，为什么在容器内写入填充：

感谢任何提示！

我已经尝试过使用 container-fluid 类，但是该行似乎没有获得最大宽度。

整个 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Snoo</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="app.css">

</head>
<body>  
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Snoo!</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Reddit!</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="container"> 
        <div class="row">           
            <div class="col_xl-12">     
                <div id="content">      
                    <h1>Snoo!</h1>
                    <hr>
                    <h3>A chatbot based on a million reddit comments, quiet salty!</h3>
                    <button class="btn btn-primary btn-lg">Learn more!</button>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

</html>

css:

#content {
    text-align: center;
    padding-top: 25%
}

【问题讨论】：

col_xs-12 应该是 col-xs-12

标签： html css bootstrap-4

【解决方案1】：

从您的编码中删除容器。然后该行将具有全宽
你的班级应该是col-*-*，但你使用了col_xl-12

HTML 结构将是：

<div class="row">
  <div class="/* Container or Container-fluid or Col-* */">
  </div>
</div>

【讨论】：

这是错误的，容器永远不会在行中使用，并且行应始终放在容器内...在发布此类答案之前请阅读文档
@TemaniAfif 没有特定的文档提到容器应该始终是行的父级。我对此没有任何误解。您能否解释一下或提供文档链接，以便我可以清楚地了解！
@LaljiTadhani 你可以看到，他们提到了上面的例子，他们使用容器仅供参考：“容器提供了一种居中和水平填充站点内容的方法。使用 .container 响应像素宽度或 .container-宽度的流体：所有视口和设备尺寸的 100%。" getbootstrap.com/docs/4.0/layout/grid
请再读一遍:)：Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。（这是第一句话）然后你可以阅读 内容应该放在列中，并且只有列可以是行的直接子级。 ...如果不清楚容器不应进入行内，那么对不起...您可以另请阅读：我们在 .row 上使用负边距方法：ii 让您考虑哪个类在填充中使用正值来调节这些负值
如果你在 v3 getbootstrap.com/docs/3.3/css 中阅读：行必须放置在 .container（固定宽度）或 .container-fluid（全宽）中，以便正确对齐和填充. 以及 内容应该放在列中，并且只有列可以是行的直接子级。

【解决方案2】：

我看到一个错字，尝试更改：

col_xl-12 转 -> col-xl-12

【讨论】：

【解决方案3】：

您的班级名称错误col_xl-12 更改班级名称col-xl-12

https://v4-alpha.getbootstrap.com/layout/grid/

【讨论】：

谢谢，我确实是手动输入的。感谢您又为我节省了 30 分钟 :)