如何使用 bootstrap 5 或 css 在图标下创建带有文本的按钮?
How to create button with text under icon using bootstrap 5 or css?
我想使用 Bootstrap 5 或我自己的 CSS 类 创建以下按钮。我怎样才能做到这一点?
例子:
[一组按钮][1]
如您所见,其中一些用作下拉按钮。
我一直在寻找,但只在同一行中找到图标和文本的示例。也许我必须使用 Bootstrap 卡?
[1]: https://i.stack.imgur.com/V78lr.png
在文本和图标周围放置 div,然后设置 display: flex;
和 flex-direction: column;
应该可以解决问题
解法:
.command-button {
width: 85px;
display: flex;
flex-direction: column;
text-align: center;
background: #f8f9fa;
padding: 10px;
margin: 0px 3px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
border-color: #ccc;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div style="display: flex; flex-direction: row; padding: 0px 15px;">
<div class="command-button dropdown">
<img src="" width="30" height="30" style="margin: auto; margin-bottom: 5px;">
<b class="dropdown-toggle" id="dropdownVisibilidad" data-bs-toggle="dropdown" aria-expanded="false">
Visible
</b>
<ul class="dropdown-menu" aria-labelledby="dropdownVisibilidad">
<li><a class="dropdown-item" href="#" >Hacer visible</a></li>
<li><a class="dropdown-item" href="#" >Hacer no visible</a></li>
</ul>
</div>
<div class="command-button">
<img src="" width="30" height="30" style="margin: auto;">
<b>Eliminar</b>
</div>
</div>
我想使用 Bootstrap 5 或我自己的 CSS 类 创建以下按钮。我怎样才能做到这一点?
例子: [一组按钮][1]
如您所见,其中一些用作下拉按钮。
我一直在寻找,但只在同一行中找到图标和文本的示例。也许我必须使用 Bootstrap 卡? [1]: https://i.stack.imgur.com/V78lr.png
在文本和图标周围放置 div,然后设置 display: flex;
和 flex-direction: column;
应该可以解决问题
解法:
.command-button {
width: 85px;
display: flex;
flex-direction: column;
text-align: center;
background: #f8f9fa;
padding: 10px;
margin: 0px 3px;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
border-color: #ccc;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<div style="display: flex; flex-direction: row; padding: 0px 15px;">
<div class="command-button dropdown">
<img src="" width="30" height="30" style="margin: auto; margin-bottom: 5px;">
<b class="dropdown-toggle" id="dropdownVisibilidad" data-bs-toggle="dropdown" aria-expanded="false">
Visible
</b>
<ul class="dropdown-menu" aria-labelledby="dropdownVisibilidad">
<li><a class="dropdown-item" href="#" >Hacer visible</a></li>
<li><a class="dropdown-item" href="#" >Hacer no visible</a></li>
</ul>
</div>
<div class="command-button">
<img src="" width="30" height="30" style="margin: auto;">
<b>Eliminar</b>
</div>
</div>