Блог

Я попробовал учебник по начальной загрузке 5 и у меня есть следующий вопрос относительно его оперативности: Насколько я понял, правила применяются от малого до большого (например, сначала sm, затем md) первое применяемое правило-это общее правило без размеров (например, col-12)

Теперь мне нужно, чтобы части информации, которые я хочу отображать рядом друг с другом на большом экране, были расположены вертикально на маленьких экранах. для этого я сделал строку с 2 столбцами, в каждом классе есть col-12 для маленьких экранов и col-md-6 для большего экрана.

теперь я хочу просмотреть правильную часть информации в зависимости от bollean (с измененной кнопкой).,

поэтому я написал:

 
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md" style="background-color:lightblue">
            this is always visible
        </div>
        @if (displaySecond)
        {
            <div class="col-12 col-md" style="background-color:lightcoral">
             optional optic
            </div>
        }

    </div>
    <div class="row">
        <TelerikButton OnClick="@(() => displaySecond = !displaySecond)">Display</TelerikButton>
    </div>
</div>


@code{
    private bool displaySecond = false;
}

 

В чем здесь проблема?
ожидаемое поведение:
На большом экране: первый-во всю ширину, если второй скрыт
, первый и второй-по половине каждого, если видны оба
На маленьком экране:
каждая из обеих частей находится в своем собственном ряду.

Есть ли какие-нибудь предложения?

Заранее большое вам спасибо

Самое простое решение-удалить col-12 и разрешить поведение по умолчанию.

Точка останова для начальной загрузки col-mdxxx составляет 768 пикселей, поэтому «col-md» вступает в силу только для ширины страницы, превышающей 768 пикселей. Ниже этого вы получаете сложенные дивы, там не определен col.

Если вам нужно больше контроля, вы можете увидеть это в приведенном ниже коде, где я устанавливаю разные размеры md для каждого столбца.

 @page "/Test"
<div class="container-fluid">
    <div class="row">
        <div class="col-md" style="background-color:lightblue">
            this is always visible
        </div>
        @if (displaySecond)
        {
            <div class="col-md" style="background-color:lightcoral">
                optional optic
            </div>
        }

    </div>
    <div class="row">
        <div class="col-md @col1" style="background-color:lightblue">
            this is always visible
        </div>
        @if (displaySecond)
        {
            <div class="col-md @col2" style="background-color:lightcoral">
                optional optic
            </div>
        }

    </div>
    <div class="row">
        <button @onclick="Display2">Display</button>
    </div>
</div>


@code{
    private bool displaySecond = false;

    private void Display2(MouseEventArgs e)
    {
        displaySecond = !displaySecond;
    }

    private string col1 => displaySecond ? "col-md-4" : "";

    private string col2 => displaySecond ? "col-md-8" : "";
}