Question

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

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

此外，为什么在容器内写入填充：

任何提示都赞赏！

我已经尝试过使用容器流体类，但是这行似乎没有得到最大宽度。

整个HTML：

[HttpPost]
[Route("Export")]
[ActionName("Export")]
public FileResult Export([FromBody]List<Records> Record)
{
    try
    {
    }
}

的CSS：

<!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>

Answer 1

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

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

Answer 2

我看到一个错字，试着改变：

parse-opts至 - ＆gt; col_xl-12

Answer 3

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

HTML结构将是：

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

Bootstrap容器，网格行宽和填充问题

3 个答案: