bootstrap水平布局,bootstrap折叠,bootstrap table 折叠,bootstrap panel折叠
Bootstrap 5是一个流行的前端框架，它提供了一些现成的CSS和JavaScript组件，可以快速构建响应式网站。在Bootstrap 5中，堆叠和水平是两种常用的布局方式。

堆叠（Stacking）是指将多个元素垂直排列，每个元素占据一行的宽度。这种布局适用于移动设备和小屏幕，可以保证内容的易读性。例如，可以使用以下代码创建一个简单的堆叠导航栏：

html
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>


水平（Horizontal）是指将多个元素水平排列，通常使用网格系统实现。这种布局适用于大屏幕和桌面设备，可以充分利用屏幕空间。例如，可以使用以下代码创建一个简单的水平导航栏：

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>


在上面的代码中，justify-content-end类用于将导航栏元素向右对齐，实现了水平布局。