帶有標籤的按鈕組，每個按鈕的頂部

我想按鈕使用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

帶有標籤的按鈕組，每個按鈕的頂部

回答

相關問題