html - 使用引导程序在容器内对齐步进器 div
问题描述
我在容器内的步进器中有一个标题图标列表,我试图让它们响应页面大小的变化,但它不起作用。我试图改变容器在不同 div 中的位置,但它没有用。
我正在使用 Bootstrap5
我正在尝试获取容器内的数字,这是模板:
<div class="container flex-grow-1 flex-shrink-0 py-5">
<div class="mb-5 p-4 bg-white shadow-sm">
<h1 class="text-center">Plan</h1>
<div id="stepper1" class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<!-- General Information -->
<div class="step active" data-target="#test-l-1">
<button
type="button"
class="step-trigger"
role="tab"
id="stepper1trigger1"
aria-controls="test-l-1"
aria-selected="true"
>
<span class="bs-stepper-circle">1</span>
<!-- <span class="bs-stepper-label">General Information</span>-->
</button>
</div>
<!-- Summary -->
<div class="step" data-target="#test-l-2">
<button
type="button"
class="step-trigger"
role="tab"
id="stepper1trigger2"
aria-controls="test-l-2"
aria-selected="false"
>
<span class="bs-stepper-circle">2</span>
<!-- <span class="bs-stepper-label">Summary</span>-->
</button>
</div>
</div>
</div>
</div>
解决方案
您可以将col
classdiv
与row
class 一起使用,对于每个button
. 它会根据屏幕的宽度自动调整每个按钮的宽度。使用col
类,每个div
withbutton
将占用相等的空间。在我们的例子中,因为有 10 个button
元素,每个元素占据整个宽度的 10%。
你可以这样做:HTML:
<div class="container flex-grow-1 flex-shrink-0 py-5">
<div class="mb-5 p-4 bg-white shadow-sm">
<h1 class="text-center">Plan</h1>
<div id="stepper1" class="bs-stepper">
<div class="row mt-5 bs-stepper-header" role="tablist">
<div class="col d-flex justify-content-center" data-target="#test-l-1">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1" aria-selected="true">
<span class="bs-stepper-circle">1</span>
</button>
</div>
<div class="col d-flex justify-content-center">
<button>2</button>
</div>
<div class="col d-flex justify-content-center">
<button>3</button>
</div>
<div class="col d-flex justify-content-center">
<button>4</button>
</div>
<div class="col d-flex justify-content-center">
<button>5</button>
</div>
<div class="col d-flex justify-content-center">
<button>6</button>
</div>
<div class="col d-flex justify-content-center">
<button>7</button>
</div>
<div class="col d-flex justify-content-center">
<button>8</button>
</div>
<div class="col d-flex justify-content-center">
<button>9</button>
</div>
<div class="col d-flex justify-content-center">
<button>10</button>
</div>
</div>
</div>
</div>
</div>
您也可以添加 CSS:
button {
border: none;
display: flex;
padding: 5px;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 30px;
height: 30px;
}
您可以通过此处的官方文档了解有关 Bootstrap 网格系统的更多信息:https ://getbootstrap.com/docs/5.1/layout/grid/
推荐阅读
- ubuntu - Asp.Net Core Web API 应用程序:如何更改监听地址?
- javascript - 如何使用 PHP 从 mysql 中查询图像
- java - 多个局部变量与多个计算
- javascript - 在另一个文件 [HTML+JS] 的 html 标记中显示用户输入
- android - 某些测试人员无法使用 Android 中的 Beta 测试应用程序
- xamarin.forms - 当用户在三星 S9 上隐藏 Android 导航栏时,如何让我的 Xamarin.Forms 应用程序重绘
- pandas - 如何在熊猫中获取组内“特定”列值的平均值
- javascript - 使用 VueJS 进行表单验证时的 null 值
- python-3.x - 修复了将空列表分配给值“DNA_Sequence”的错误
- java - 类路径资源 [org/quartz/impl/jdbcjobstore/tables_h2.sql] 无法打开,因为它不存在