为什么 bootstrap 4 偏移样本不起作用？答案

【问题标题】：Why is the bootstrap 4 offset sample not working?为什么 bootstrap 4 偏移样本不起作用？
【发布时间】：2019-05-03 21:13:21
【问题描述】：

我正在尝试使用 bootstrap 4.1 来抵消我的列。我已经从here 复制了样本。我的页面有：

@page
@{
    Layout = "./Shared/_NoLayout";
}

@model OVNew.Pages.TestModel

<h2>Test</h2>

<div class="container ">
    <div class="row">
        <div class="col-md-4 test-div">.col-md-4</div>
        <div class="col-md-4 offset-md-4 test-div">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3 test-div">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3 test-div">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3 test-div">.col-md-6 .offset-md-3</div>
    </div>
</div>

布局文件最小：

<!DOCTYPE html>
<html>
<head >
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <!--<partial name="_CookieConsentPartial" />-->
        @RenderBody()

</body>
</html>

而 test-div 是这样定义的：

.test-div {
    background-color: antiquewhite;
    border: 1px solid;
    margin: 5px;
}

我的页面如附件所示 - NO OFFSETS... 如果我删除封闭容器 div，情况类似。

发生了什么事？

我正在使用引导程序 4.1.3。我在测试版中看到了这个问题，但应该按照 4.1 文档进行修复。

【问题讨论】：

标签： razor bootstrap-4 offset

【解决方案1】：

offset-*-* 类在您使用它们的元素上应用margin-left。正如您在以下代码中看到的，offset-md-3 应用了25% margin-left。

@media (min-width: 768px)
    .offset-md-3 {
        margin-left: 25%;
    }

您重置了test-div 中列的margin 属性。这些列现在有5px margin-left，而不是25%。因此，offset-*-* 类不起作用。

如果您不重置这些元素中的 margin，它应该可以工作。

https://codepen.io/anon/pen/RqvEvJ

【讨论】：

感谢@mahan！所以我是否可以假设我可以更改其余的边距值，除了左边？
@GilShalit 欢迎您。您可以设置它的margin-y，但不能设置margin-x。如果你这样做，你break the grid。