Styling Bootstrap btn-group-justified, добавление полей и размер по вертикали

Я хотел бы создать оригинальный Bootstrap btn-group-justified с полями радио input (http://getbootstrap.com/javascript/#buttons-examples).

Оригинальный стиль выглядит следующим образом:
enter image description here

но я хотел бы сделать каждую кнопку квадратной кнопкой и дать им все пробелы между собой. Что-то вроде этого:
enter image description here

Я пытался с немного измененной разметкой html из примеров Bootstrap

[data-toggle="buttons"] .btn>input[type="radio"] {
  display: none;
}

.category-select .btn-container {
  position: relative;
  width: 19%;
  padding-bottom: 19%;
  float: left;
  height: 0;
  margin: 1%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-container .btn,
.btn-container .btn input {
  max-width: 100%;
}
<div class="btn-group-justified category-select" data-toggle="buttons">
  <div class="btn-container">
    <label class="btn category category-one">
          <input type="radio" name="options" id="option1"> One
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-two">
          <input type="radio" name="options" id="option2"> Two
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-three">
          <input type="radio" name="options" id="option3"> Three
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-four">
          <input type="radio" name="options" id="option4"> Four
        </label>
  </div>
  <div class="btn-container">
    <label class="btn category category-five">
          <input type="radio" name="options" id="option5"> Five
        </label>
  </div>
</div>

Ответы

Ответ 1

HTML

<div class="container"> 
<div class="btn-group blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

CSS

.blocks .btn-primary 
{
    padding: 24px 12px;
    margin: 0 5px;  
    border-radius: 0;
}

будет выглядеть так:

enter image description here

Если я применяю класс, основанный на btn-group, а не только btn-group, они стали оправданными, но все еще не квадратными, и они не имеют разницы между ними

Я не думаю, что класс btn-group-justified будет использовать без btn-group. Хотя это не похоже на то, что вы не используете btn-group.

btn-group-justified установите отображение в таблицу. Чтобы добавить границу между двумя ячейками, вам понадобится border-spacing вместо margin (см.: Почему div с "display: table-cell; "" не зависит от маржа?)

теперь у вас есть html:

<div class="container"> 
<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

CSS

.blocks .btn-primary 
{
    padding: 24px 12px;
    border-radius: 0;

}
.blocks {border-spacing:5px;}

Что будет выглядеть:

enter image description here

Обратите внимание, что вместо квадратов есть прямоугольники. btn-group-justified установите общее число с группой на 100% от ее родительского. Для создания квадратов вам понадобится jQuery для установки высоты, основанной на (внутренней) ширине ваших кнопок. (см.: Высота шкалы CSS для соответствия ширине - возможно, с помощью formfactor)

$(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth());
$(window).resize(function(){ $(".btn-group-justified.blocks .btn").height($(".btn-group-justified.blocks .btn").innerWidth()); });