使用Bootstrap将两个面板放在一起可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">面板1</h5>
<p class="card-text">这是面板1的内容。</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">面板2</h5>
<p class="card-text">这是面板2的内容。</p>
</div>
</div>
</div>
</div>
</div>
在上述代码中,使用container
类包裹整个内容,使用row
类创建一行。然后,使用col-md-6
类将两个面板分别放在两个等宽的列中。card
类用于创建面板,card-body
类用于添加面板的内容。
这样,两个面板就会被放在一起,并且适应不同屏幕大小的布局。你可以根据需要修改面板的内容和样式。
注意:以上代码使用的是Bootstrap 5版本的CDN链接,如果你使用的是其他版本的Bootstrap,请相应地修改CDN链接。
领取专属 10元无门槛券
手把手带您无忧上云