Styling Bootstrap ist btn-group-gerechtfertigt, durch das hinzufügen von Rändern und Größenanpassung vertikal

Ich würde gerne im Stil der original-Bootstrap ist btn-group-justified mit radio input Felder (http://getbootstrap.com/javascript/#buttons-examples).

Den ursprünglichen Stil sieht wie folgt aus:

aber ich möchte, um jeder Taste eine quadratische Schaltfläche und geben Ihnen alle paar Leerzeichen zwischen einander. So etwas wie dieses:

Ich versuche mit etwas modifizierte html-markup von Bootstrap Beispiele

CSS:

[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%;
}

HTML:

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

aber natürlich ist dies nicht die CSS style-meine Knöpfe wie ich will...

Die Funktionalität, die ich möchte, zu erreichen, ist zu haben, 5 Tasten, horizontal gerechtfertigt, reaktionsschnell Weg (square-shaped in alle browser-Größen) und zu handeln wie ein radio-Button-Gruppe.

Was meinst du es funktioniert nicht 'wie vorgesehen'? Habe die Stile, die Sie anwenden, nicht gut Aussehen, oder haben Sie nicht überschreiben die bootstrap-styles richtig? Sie müssen nur die richtigen CSS, die überschrieben werden, die die bootstrap-styles und bekommen es sah aus wie dein Bild?
Meine styles haben Bootstrap überschreiben die Standardeinstellungen, aber Sie nicht gut Aussehen 🙂 ich brauche korrigiert CSS was machen die radio-buttons Blick quadratisch und mit Rändern... Wird versuchen, die Bass-Jobsen die Lösung jetzt...

InformationsquelleAutor errata | 2013-10-02

24

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;
}
```
wird, sieht wie folgt aus:

Habe ich, wenn ich btn-group-gerechtfertigt-Klasse statt nur btn-group, Sie
wurde rechtfertigt aber immer noch nicht-quadratische, noch haben Sie-Marge
zwischen Ihnen

Ich glaube nicht, dass die btn-group-justified Klasse Absicht zu verwenden, ohne die btn-group. Obwohl es nicht scheint, einen Unterschied zu machen, wenn Sie nicht verwenden btn-group.

btn-group-justified einstellen der Anzeige-Tabelle. Hinzufügen einer Marge zwischen zwei Zellen, die Sie benötigen border-spacing statt margin (siehe: Warum ist ein div-Element mit "display: table-cell;" nicht betroffen von Marge?)

jetzt haben Sie 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;}
```
Wird wie folgt Aussehen:

Hinweis: Sie müssen Rechtecke anstatt Quadrate. btn-group-justified gesetzt, die insgesamt mit der Gruppe zu 100% der Eltern. Um Plätze, die Sie benötigen, jQuery, um die Größe auf der Grundlage der (innere)Breite des buttons. (siehe: CSS Höhe skalieren auf Breite anpassen - gegebenenfalls mit einem Formfaktor)
```
$(".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()); });
```
- Hm, aber diese Gewohnheit ist nicht gerechtfertigt, button-group, noch macht es meine Knöpfe, viereckig, vor allem, wenn eine Taste hat ein bisschen mehr text...
- Wenn ich btn-group-justified Klasse statt nur btn-group wurden Sie gerechtfertigt, aber immer noch nicht-quadratische, noch haben Sie die Marge zwischen Ihnen.
- OK, danke für die Hilfe! Ich dachte, ich werde in der Lage sein, dies zu lösen, mit nur CSS, aber das ist auch eine gute Lösung. Ich denke aber, ich werde versuchen, einige verschiedene CSS-only-Optionen zu erreichen, was ich brauche... akzeptiere Ihre Antwort, obwohl =)
InformationsquelleAutor Bass Jobsen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.