如何使我的内容区域位于菜单右侧？

Question

你好，我正在尝试使用 bootstrap 将我的内容区域放在垂直导航栏的右侧 4. 在我当前的代码中，内容区域位于菜单下方。有关如何修复它的任何建议，以便它位于右侧菜单的旁边。谢谢

 <div class="container-fluid">
 <div class="col-3">

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
 target="#collapsibleNavbar" aria-expanded="true">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
 <ul class="navbar.flex-column">
 <li class="nav-item">
 <a class="nav-link" href="index.html">Index</a>
 </li>

 </ul>
 </div>
 </nav>
 </div>
 </div>

 <div class="container-fluid">
 <div class="col-9">

 <p>Main Content area</p>

 </div>
 </div>

Answer 1

复制col-9div，放在col-3div结束后。添加 d-flex flex-row classes with container-fluid class.

如何使我的内容区域位于菜单右侧？

how to make my content area to the right of my menu?

html

bootstrap-4