我正在尝试使用btn-toolbar对按钮进行分组(不使用btn-group,因为我想要不同的按钮),并且我也想在每个按钮的顶部添加标签,但是我无法实现我想要的功能。这是代码片段。

<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

最佳答案

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

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

关于html - 每个按钮顶部带有标签的按钮组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41998764/

10-12 12:27
查看更多