BlazorBootstrap 5 列：组合等宽和设置宽度

Question

我尝试了 bootstrap 5 教程，但对它的响应性有以下疑问： 据我了解， 规则从小到大适用（例如，先是 sm，然后是 md） 第一个应用的规则是没有大小的一般规则（例如 col-12）

现在我必须将我想在大屏幕上并排显示的部分信息 并垂直堆叠在小屏幕上。 因此，我做了一行 2 列， 每个类都有 col-12 用于小屏幕和 col-md-6 用于大屏幕。

现在我想根据布尔值（更改按钮）来调整信息的正确部分，

所以我写了：

<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;
}

问题出在哪里？ 预期行为： 在大屏幕上：第一个是全宽的，如果第二个是隐藏的 第一个和第二个各占一半，如果两者都可见 在小屏幕上： 这两部分中的每一个都在自己的行中。

有什么建议吗？

非常感谢您

Answer 1

最简单的解决方案是删除 col-12 并让默认行为接管。

Bootstrap col-mdxxx 的断点是 768px，因此“col-md”仅对大于 768px 的页面宽度生效。在它下面你会得到堆叠的 div，没有定义 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" : "";
}