Бутстрап кнопки форматирования

Question

Я пытаюсь создать удобную для глаз клавиатуру 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:

button.btn {ширина: 33px;}

Answer 3

Вам это нужно перфорационных.

Никаких дополнительных 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 css, и я исправлю его.

Answer 4

Пожалуйста, используйте якорь тег вместо кнопки тег и добавить БТН-группы оправдано класс 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>