Html 引导右侧4个垂直选项卡和内容

我正在尝试使用引导选项卡创建表单向导。布局很简单

垂直选项卡，如侧边栏菜单和右侧的内容

|   Tab1  |                      |
|   Tab2  |       Content        |
|   Tab3  |                      |

为了做到这一点，我使用了引导网格，但有一个问题，如果我减少浏览器的大小，内容将放在选项卡下

不管浏览器大小如何，是否有办法将内容保留在选项卡旁边

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
            </div>
        </div>
        <div class="col-md-10">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    <div class="form-group">
                        // content
                    </div>
                </div>
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
            </div>
        </div>
    </div>
</div>

//内容
...
...
...

假设引导程序为4，只需删除md断点即可

使用col-2代替col-md-2

<div class="row">
    <div class="col-2"> 2 col content </div>
    <div class="col-10"> 10 col content </div>
</div>

2柱含量
10柱含量

---

您应该只使用

col-sm

，而不是

col-md-2

和

col-md-10

，

md

代表中等。除超小屏幕外，它将在所有屏幕上停留在2列中。或者您可以使用表格。

这确实有效，但在调整大小时，右侧的内容会溢出到选项卡顶部，这是因为您的内容比容器的实际内容多？我刚刚更改为col-3 col-9，似乎足以根据选项卡文本大小而不溢出