Почему смещение примера начальной загрузки 4 не работает? - PullRequest
0 голосов
/ 02 декабря 2018

Я пытаюсь получить загрузчик 4.1, чтобы сместить мои столбцы.Я скопировал образец из здесь .Моя страница имеет:

@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, ситуация аналогичная.

Что происходит?

enter image description here

Я использую загрузчик 4.1.3.Я видел, что были проблемы с этим в бета-версии, но это должно быть исправлено, в соответствии с 4.1 документами.

1 Ответ

0 голосов
/ 02 декабря 2018

offset-*-* классы применяются margin-left к элементу, который вы используете.Как видно из следующего кода, offset-md-3 применяется 25% margin-left.

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

Вы сбросили свойства margin столбцов в test-div.Столбцы теперь имеют 5px margin-left, а не 25%.Следовательно, классы offset-*-* не работают.


Он должен работать, если вы не сбросите margin этих элементов.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...