如何使用引导程序 5 或 css 在图标下创建带有文本的按钮？答案

【问题标题】：How to create button with text under icon using bootstrap 5 or css?如何使用引导程序 5 或 css 在图标下创建带有文本的按钮？
【发布时间】：2021-04-17 18:16:26
【问题描述】：

我想使用 Bootstrap 5 或我自己的 CSS 类创建以下按钮。我怎样才能做到这一点？

示例： [按钮组][1]

如您所见，其中一些用作下拉按钮。

我一直在寻找，我只找到了在同一行中带有图标和文本的示例。也许我必须使用引导卡？ [1]：https://i.stack.imgur.com/V78lr.png

【问题讨论】：

标签： css button bootstrap-5 bootstrap-cards

【解决方案1】：

在文本和图标周围放置一个 div，然后设置 display: flex; 和 flex-direction: column; 应该可以解决问题

【讨论】：

好的，但是如何将它们放在同一行？我想要多个线路按钮
一种解决方案是用另一个 div 将所有 logo+text div 包围起来，并将 flex-direction 设置为 row
很好，并且让行为像一个按钮？悬停，边框...
只需使用 ::hover 选择器并为其设置样式，但您喜欢添加一个 href 以将其链接到某处

【解决方案2】：

解决方案：

.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>

【讨论】：