我正在尝试使用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/