使用Bootstrap将按钮放在左边,并将徽标放在同一行的中间,可以通过以下步骤实现:
<div>
容器。col-*
类来指定按钮所占据的列数,例如col-6
表示按钮占据容器的一半宽度。<span>
元素,用于容纳徽标。text-center
将徽标居中对齐。以下是一个示例代码:
<div class="container">
<div class="row">
<div class="col-6">
<button class="btn btn-primary">按钮</button>
</div>
<div class="col-6 text-center">
<span class="badge badge-secondary">徽标</span>
</div>
</div>
</div>
在这个示例中,按钮占据容器的一半宽度,徽标位于按钮的右侧并居中对齐。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在
元素上添加 .btn-group 类来创建按钮组。
实例
领取专属 10元无门槛券
手把手带您无忧上云