导航窗格

Question

我在Bootstrap 4创建了一个导航窗格。我希望对于小于sm的屏幕，导航窗格是垂直显示而不是水平显示。它有效，但我注意到标签的内容显示在所有标签标题之后（请参见下面的图片）。如何更改布局，以便在单击选项卡时，该选项卡的内容显示在其下方，然后显示剩余的选项卡标题

我希望在Lorem Ipsum personal标题标题

之前显示prints

以下是代码

<div class="container-fluid">
    <ul class="nav nav-tabs flex-column flex-sm-row" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="events-tab" data-toggle="tab" href="#events" role="tab" aria-controls="events" aria-selected="true"> Events</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="personal-tab" data-toggle="tab" href="#personal" role="tab" aria-controls="personal" aria-selected="false"> Personal</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" id="prints-tab" data-toggle="tab" href="#prints" role="tab" aria-controls="prints" aria-selected="false"> Prints</a>
        </li>

    </ul>
    <div class="tab-content " id="myTabContent">
        <div class="tab-pane fade show active" id="events" role="tabpanel" aria-labelledby="events-tab">
            <div class="container">
                <div class="row">
                    <p> Lorem Ipsum events </p>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="personal" role="tabpanel" aria-labelledby="personal-tab">
            <div class="container">
                <div class="row">
                    <p> Lorem Ipsum personal </p>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="prints"  role="tabpanel" aria-labelledby="prints-tab">
            <div class="container">
                <div class="row">
                    <p> Lorem Ipsum prints</p>
                </div>
            </div>
        </div>  

    </div>
</div>

Answer 1

您可以使用卡片组件进行此外观。

检查文档here。