Styling Bootstrap's btn-group-giustificato, aggiungendo margini e ridimensionamento verticale

Question

Mi piacerebbe modellare il Bootstrap originale btn-group-justified con i campi radio input (http://getbootstrap.com/javascript/#buttons-examples).

Lo stile originale assomiglia a questo:

ma mi piacerebbe fare ogni bottone di un pulsante di forma quadrata e dare loro tutto un po 'di spazio tra l'altro. Qualcosa di simile a questo:

stavo provando con un markup HTML po 'modificato da Bootstrap esempi

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

ma naturalmente questo CSS non stile miei bottoni come voglio per ...
La funzionalità che mi piacerebbe ottenere è quella di avere 5 pulsanti, giustificati in orizzontale, reattivi (a forma quadrata in tutte le dimensioni del browser) e di agire come un gruppo di pulsanti radio.

Answer 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; 
} 

volontà assomiglia:

Se applico btn-gruppo-classe giustificato invece di btn-gruppo, essi divennero giustificata, ma ancora non-forma quadrata, e non hanno margine di tra loro

Non credo che la classe btn-group-justified sarà essere intenzionato a utilizzare senza il btn-group. Anche se non sembra fare la differenza quando non si utilizza btn-group.

btn-group-justified impostare il display sulla tabella. Per aggiungere un margine tra due cellule dovrai border-spacing al posto di margin (vedi: Why is a div with "display: table-cell;" not affected by margin?)

ora avete 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;} 

Quale avrà il seguente aspetto:

Nota: si hanno rettangoli anziché quadrati. btn-group-justified imposta il totale con del gruppo sul 100% del suo genitore. Per creare quadrati è necessario jQuery per impostare l'altezza in base alla larghezza (interna) dei pulsanti.(vedi: CSS scale height to match width - possibly with a 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()); });