每个按钮顶部带有标签的按钮组答案

【问题标题】：button group with label on top of each button每个按钮顶部带有标签的按钮组
【发布时间】：2017-02-02 09:42:56
【问题描述】：

我正在尝试使用 btn-toolbar 对按钮进行分组（不使用 btn-group，因为我想要不同的按钮）并且我还想在每个按钮的顶部添加标签，但我无法实现我想要的。这是代码sn-p。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
  <button type="button" class="btn btn-lg output_border">A</button>
</div>

here is picture of what i am expecting

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这是您需要的解决方案。它按照您显示的图像工作

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap btn-tool</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .labelarrange1{
        float:left;
        position:relative;
        left:5px;
        top:8px;
        font-size:10px;
    }

    .btn{
        border-radius:0;
        background:powderblue;
        border-radius:0;
    }
  </style>
</head>
<body>

<div class="btn-toolbar container" role="toolbar" aria-label="Toolbar with button groups">
  <div class="row">
      <div class="col-md-1">
          <label class="labelarrange1">Relay 1</label>
          <br>
          <button type="button" class="btn btn-lg">A</button>
      </div>

      <div class="col-md-1">
          <label class="labelarrange1">Relay 1</label>
          <br>
          <button type="button" class="btn btn-lg">A</button>
      </div>

      <div class="col-md-1">
          <label class="labelarrange1">Relay 3</label>
          <br>
          <button type="button" class="btn btn-lg" style="background:#eee;">O</button>
      </div>
  </div>



</div>
</body>
</html>

【讨论】：

好的解决方案适用于大屏幕，但在手机等小屏幕上，它会垂直显示按钮。谢谢
要根据视口大小带来响应能力，您需要为不同大小的屏幕使用@media rule in css。我什至可以帮助您解决其他问题，您可以访问 link 了解更多信息。
谢谢。如果它们不是按钮而只是标签，我该怎么办。
你可以把图片发给我。您希望安排的方式。我们肯定能找到办法。
我遵循bootsnipp.com/snippets/featured/list-group-horizontal 方法对标签进行分组，但无法为每个列表元素添加标题

【解决方案2】：

你可以用这个

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
  <label>a</label>
  <button type="button" class="btn btn-lg output_border">A</button>
</div>

我可能并不完全正确。尝试使用一些分离技术。

【讨论】：