Question

我正在尝试获取引导程序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;
}

我的页面显示出来，如附件中所示-没有偏移...如果我将封闭的容器div移除，情况类似。

这是怎么回事？

我正在使用引导程序4.1.3。我看到Beta版中存在此问题，但根据4.1文档应该已解决。

Answer 1

offset-*-*类在您使用它们的元素上应用margin-left。如下面的代码所示，offset-md-3适用于25% margin-left。

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

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

如果不重置这些元素的 margin ，它应该会起作用。

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

引导程序4偏移采样为何不起作用？

1 个答案: