Bootstrap 更大的图标
Bootstrap Bigger Icon
在下面的屏幕截图中,我尝试在 2 个不同的列中添加 2 个按钮图标,它们也是一行的子项。
我希望按钮尽可能大,如您所见。
这是我针对该特定行的代码;
<div class="row">
<div class="col-md-6 mb-3 text-start">
<label for="departure">VIP (00):</label>
<input type="number" class="form-control" id="departure" placeholder="0" value="" required>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill"></i>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill "></i>
</div>
我尝试了一些东西,但无法得到合适的设计
字体大小 CSS 选项效果最佳。
所以你可以做到。
i{
font-size: 50px;
}
以上将影响所有图标标签,也可能影响所有 HTML5 斜体标签。
或者您可以在图标中添加 Class。 CSS 将是....
i .big-icon{
font-size: 50px;
}
HTML 是……
<i class="bi bi-plus-circle-fill big-icon"></i>
这是 GetBootstrap 文档的 link....
在下面的屏幕截图中,我尝试在 2 个不同的列中添加 2 个按钮图标,它们也是一行的子项。
我希望按钮尽可能大,如您所见。
这是我针对该特定行的代码;
<div class="row">
<div class="col-md-6 mb-3 text-start">
<label for="departure">VIP (00):</label>
<input type="number" class="form-control" id="departure" placeholder="0" value="" required>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill"></i>
</div>
<div class="col-md-3 align-self-center">
<i class="bi bi-plus-circle-fill "></i>
</div>
我尝试了一些东西,但无法得到合适的设计
字体大小 CSS 选项效果最佳。
所以你可以做到。
i{
font-size: 50px;
}
以上将影响所有图标标签,也可能影响所有 HTML5 斜体标签。
或者您可以在图标中添加 Class。 CSS 将是....
i .big-icon{
font-size: 50px;
}
HTML 是……
<i class="bi bi-plus-circle-fill big-icon"></i>
这是 GetBootstrap 文档的 link....