引导按钮格式化

Question

我试图使用ONLY bootstrap创建对眼睛友好的4x4键盘。不幸的是，尽管我将按钮划分为多个组，但它们似乎没有格式化 - 单独的线条有不同的长度;此外，一些按钮有圆角。在快捷方式中，它看起来如下：

是否有可能不使用CSS 来修复它？我的意思是，我的目标是将其格式化为一个大的正方形，分为16个较小的正方形。 这是我的代码：

<div class="btn-group" role="group">
<button id = "1" value="1" class="btn btn-info">1</button>
<button id = "2" value="2" class="btn btn-info">2</button>
<button id = "3" value="3" class="btn btn-info">3</button> 
<button id = "plus2" value="plus2" class="btn btn-primary">+</button>
</div><br> <div class="btn-group" role="group">
<button id = "4" value="4" class="btn btn-info">4</button>
<button id = "5" value="5" class="btn btn-info">5</button>
<button id = "6" value="6" class="btn btn-info">6</button> 
<button id="minus2" value="minus2" class="btn btn-primary">-</button>
</div><br> <div class="btn-group" role="group">
<button id = "7" value="7" class="btn btn-info">7</button>
<button id = "8" value="8" class="btn btn-info">8</button>
<button id = "9" value="9" class="btn btn-info">9</button> 
<button id = "razy2" value="razy2" class="btn btn-primary">*</button> 
</div><br><div class="btn-group" role="group">
<button id = "0" value="0" class="btn btn-info">0</button>
<button id = "p" value="p" class="btn btn-primary">,</button>
<button id = "rowna" value="rowna"  class="btn btn-success">=</button>
<button id = "dziel2" value="dziel2" class="btn btn-primary">/</button>
</div>

当我将这些小组替换成一个大组时，第一个和最后一个按钮有圆角，线条仍然有不同的长度。

提前谢谢你。

Answer 1

对于按钮大小，它取决于该按钮内的内容;就像你写'添加'一样，按钮的宽度会自动增加。对于这个'，'你必须固定按钮的宽度，所有按钮都将以相同的宽度显示。

Answer 2

你需要制表。

不需要额外的CSS，你可以这样做：

<table border="0" cellpadding="0" cellspacing="0">
  <tr class="btn-group">
    <td><button id = "1" value="1" class="btn btn-info">1</button></td>
    <td><button id = "2" value="2" class="btn btn-info">2</button></td>
    <td><button id = "3" value="3" class="btn btn-info">3</button></td>
    <td><button id = "plus2" value="plus2" class="btn btn-primary">+</button></td>
  </tr>
  <tr class="btn-group">
    <td><button id = "4" value="4" class="btn btn-info">4</button></td>
    <td><button id = "5" value="5" class="btn btn-info">5</button></td>
    <td><button id = "6" value="6" class="btn btn-info">6</button> </td>
    <td><button id="minus2" value="minus2" class="btn btn-primary">-</button></td>
  </tr>
  <tr class="btn-group">
    <td><button id = "7" value="7" class="btn btn-info">7</button></td>
    <td><button id = "8" value="8" class="btn btn-info">8</button></td>
    <td><button id = "9" value="9" class="btn btn-info">9</button> </td>
    <td><button id = "razy2" value="razy2" class="btn btn-primary">*</button> </td>
  </tr>
  <tr class="btn-group">
    <td><button id = "0" value="0" class="btn btn-info">0</button></td>
    <td><button id = "p" value="p" class="btn btn-primary">,</button></td>
    <td><button id = "rowna" value="rowna"  class="btn btn-success">=</button></td>
    <td><button id = "dziel2" value="dziel2" class="btn btn-primary">/</button></td>
  </tr>
</table>

只要所有btn-group课程都没有做太多，上面的工作就可以了。

如果它仍然坏了，请粘贴btn-group css，我就会修复它。

Answer 3

对于按钮大小，它取决于该按钮内的内容;就像你写'添加'一样，按钮的宽度会自动增加。对于这个'，'你必须固定按钮的宽度，所有按钮都将以相同的宽度显示。

定义CSS：

button.btn {width：33px;}

Answer 4

请使用锚标记代替按钮标记 并将 btn-group-justified 类添加到div。

  <div class="btn-group btn-group-justified" role="group">
    <a href="jjavascript:void(0)" class="btn btn-info">1</a>
    <a href="javascript:void(0)" class="btn btn-info">2</a>
    <a href="javascript:void(0)" class="btn btn-info">3</a>
    <a href="javascript:void(0)" class="btn btn-primary">+</a>
  </div>
 <div class="btn-group btn-group-justified" role="group">
   <a href="javascript:void(0)" class="btn btn-info">4</a>
    <a href="javascript:void(0)" class="btn btn-info">5</a>
    <a href="javascript:void(0)" class="btn btn-info">6</a>
    <a href="javascript:void(0)" class="btn btn-primary">-</a>
  </div>
 <div class="btn-group btn-group-justified" role="group">
     <a href="javascript:void(0)" class="btn btn-info">7</a>
    <a href="javascript:void(0)" class="btn btn-info">8</a>
    <a href="javascript:void(0)" class="btn btn-info">9</a>
    <a href="javascript:void(0)" class="btn btn-primary">*</a>
  </div>
<div class="btn-group btn-group-justified" role="group">
     <a href="javascript:void(0)" class="btn btn-info">0</a>
    <a href="javascript:void(0)" class="btn btn-primary">.</a>
    <a href="javascript:void(0)" class="btn btn-success">=</a>
    <a href="javascript:void(0)" class="btn btn-primary">/</a>
  </div>