为什么这些保证金课程在 Bootstrap 上对我不起作用？答案

【问题标题】：Why aren't these margin classes working for me on Bootstrap?为什么这些保证金课程在 Bootstrap 上对我不起作用？
【发布时间】：2021-07-24 18:08:48
【问题描述】：

我是 Bootstrap 的新手，无法在事物之间获得边距。我将 mb-12 放在 navbar 类中，并将 mt-12 放在容器类中以进行很好的衡量，但什么也没发生。其他一切正常。

我查看了此处的 Bootstrap 文档和帖子，但无法弄清楚。

<!DOCTYPE html>
<html>
<head>
    <Title>The Title</Title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar mb-12 py-4 bg-warning">
        <H1>Words Here</H1>
    </nav>
    <div class="container mt-12">
        <div class="row">
            <div class="col bg-light">Text</div>
            <div class="col bg-primary">
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
            </div>
            <div class="col bg-success">Text</div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

mb-12 不是 Bootstrap 类。您可以应用的最大边距底部为mb-5。
更多信息请见Bootstrap docs
另一方面，如果你改用Tailwind...
预期结果是什么？

标签： html css bootstrap-4 margins

【解决方案1】：

我认为您没有为边距底部使用适当的类。例如，我使用了mb-2，它运行良好。 mb-12 不是正确的类。您需要参考一些与 bootstrap 相关的教程，以提高您的技能；

<!DOCTYPE html>
<html>
<head>
    <Title>The Title</Title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar mb-2 py-4 bg-warning">
        <H1>Words Here</H1>
    </nav>
    <div class="container mt-12">
        <div class="row">
            <div class="col bg-light">Text</div>
            <div class="col bg-primary">
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
                <p>Stuff</p>
            </div>
            <div class="col bg-success">Text</div>
        </div>
    </div>
</body>
</html>

有许多有用的教程可用。对于example

【讨论】：

【解决方案2】：

mt-12 和 mb-12 类无法正常工作，因为 Bootstrap 不支持它们，您只能将 0 到 5 用于填充和边距引导类。

您可以查看here

您可以通过其他方式使用 CSS 自定义您自己的类 mt-12 nd mb-12：

.mb-12{
  margin-bottom: 20px!important; /* You can custom the space you want
}

.mt-12{
  margin-top: 20px!important; /* You can custom the space you want
}

【讨论】：