d-*-block переписывает d-none

16 апреля 2021, 12:10

Пытаюсь сделать адаптивную страницу.

На странице онлайн редакторов все работает как надо: https://www.w3schools.com/code/tryit.asp?filename=G67LB0WSSGYJ на маленьком экране 2 элемента, на больших все.

Когда тоже самое повторяю в браузере - не работает.

Конкретнее. Если добавить d-none элемент пропадает на всех экранах. Если после добавить d-md-block появляется на всех. Если заметить d-md-block на d-xl-block тогда появляется только на больших. Хочу добиться того, чтобы элемент появлялся только на md и выше, как в редакторе.

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div id="tripTable" class="container">
        <div class="row">
            <div class="col-6 col-md-3 text-center"> Дата</div>
            <div class="col-3 col-md-3 d-none d-md-block text-center"> расстояние</div>
            <div class="col-2 col-md-2 d-none d-md-block text-center"> возраст</div>
            <div class="col-3 col-md-3 d-none d-md-block text-center"> вес</div>
        </div>
        <hr>
        <div class="row mt-3 bg-white" id="trip_955">
            <div class="col-6 col-md-3 text-center">2019-06-25</div>
            <div class="col-3 col-md-3 d-none d-md-block text-center">17000</div>
            <div class="col-2 col-md-2 d-none d-md-block text-center">65</div>
            <div class="col-3 col-md-3 d-none d-md-block text-center">777</div>
            <div class="col-6 col-md-1 btn btn-info" onclick="editTrip(955)">подробнее</div>
        </div>
    </div>
</body>
</html>

Answer 1

Нашел ответ, в тег head надо было добавить тег

<meta name="viewport" content="width=device-width, initial-scale=1">

т.е. итоговый вид страницы

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="tripTable" class="container">
    <div class="row">
        <div class="col-6 col-md-3 text-center"> Дата</div>
        <div class="col-3 col-md-3 d-none d-md-block text-center"> расстояние</div>
        <div class="col-2 col-md-2 d-none d-md-block text-center"> возраст</div>
        <div class="col-3 col-md-3 d-none d-md-block text-center"> вес</div>
    </div>
    <hr>
    <div class="row mt-3 bg-white" id="trip_955">
        <div class="col-6 col-md-3 text-center">2019-06-25</div>
        <div class="col-3 col-md-3 d-none d-md-block text-center">17000</div>
        <div class="col-2 col-md-2 d-none d-md-block text-center">65</div>
        <div class="col-3 col-md-3 d-none d-md-block text-center">777</div>
        <div class="col-6 col-md-1 btn btn-info" onclick="editTrip(955)">подробнее</div>
    </div>
</div>
</body>
</html>