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

我想按钮使用btn工具栏（不使用btn组，因为我想要不同的按钮），我也想添加标签在每个按钮的顶部，但我无法实现我想要的。这里是代码片段。带有标签的按钮组，每个按钮的顶部

<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

来源

2017-02-02 RPK

以下是您需要的解决方案。它按照你所显示的图像工作

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

来源

2017-02-02 10:37:53

良好的解决方案在大屏幕上工作，但在像手机这样的小屏幕上，它垂直显示按钮。谢谢 – RPK

要根据视图端口大小提高响应速度，您需要在CSS中使用@media rule for不同大小的屏幕。我甚至可以帮助你访问这个[link]（http://www.w3schools.com/cssref/css3_pr_mediaquery.asp）以了解更多信息。 –

谢谢。我如何做，如果他们不是按钮，只是标签。 – RPK

您可以使用此

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

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

来源

2017-02-02 09:57:42

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

回答

相关问题