Как класс начальной загрузки h- * value * не работает после того, как я установил значение parent?

Question

Я хочу, чтобы эти div были 250px. Когда я захожу в свой файл Site.css и пишу второй код ниже, он работает ...

<div class="container h-100" style="height:500px;">
    <div class="row row-no-gutters" style="height:500px;">
        <div class="col-sm-4 h-50 bg-success">.col</div>
        <div class="col-sm-4 h-50 bg-success">.col</div>
        <div class="col-sm-4 h-50 bg-success">.col</div>
    </div>
</div>

.h-50{
    height:50%;
}

Answer 1

h-* класс имеет !important оценку. Следовательно, он всегда будет иметь приоритет над вашими встроенными стилями.

Таким образом, ваш контейнер был стилизован как высота 100%, а не 500 пикселей.

Чтобы исправить это, просто выньте h-100 из контейнера и примените встроенную высоту либо к контейнеру, либо к строке:

<div class="container">
    <div class="row" style="height: 500px;">
        <div class="col-sm-4 h-50 bg-success">.col</div>
        <div class="col-sm-4 h-50 bg-success">.col</div>
        <div class="col-sm-4 h-50 bg-success">.col</div>
    </div>
</div>

демо: https://jsfiddle.net/davidliang2008/rkvztch0/3/