Wie kann ich suchen nette matrix von buttons mit bootstrap 3?

Ich sowas haben:

HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 1</button>
        <button type="button" class="btn btn-default">Button 2</button>
        <button type="button" class="btn btn-default">Button 3</button>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 4</button>
        <button type="button" class="btn btn-default">Button 5</button>
        <button type="button" class="btn btn-default">Button 6</button>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-default">Button 7</button>
        <button type="button" class="btn btn-default">Button 8</button>
        <button type="button" class="btn btn-default">Button 9</button>
      </div>

    </div>

    <div class="col-sm-6">
    </div>
  </div>
</div>

Und ich möchte eine matrix von 3x3 Tasten. Eine weitere Sache, Links und rechts schauen muss, wie dieses Beispiel (geraden):

HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default">button</button>
    <button type="button" class="btn btn-default">button</button>
    <button type="button" class="btn btn-default">button</button>
  </div>
</div>

Wie kann ich es machen? Vielleicht muss ich hinzufügen, dass einige bootstrap-Klasse oder css-Datei Bearbeiten?

InformationsquelleAutor Vadym Perepeliak | 2016-07-08

Eine Gruppe von Tasten + paar pseudo-Klassen

Verwenden Sie nur einen block mit der .btn-group Klasse.
Gelten eine Reihe von CSS-Eigenschaften mithilfe von pseudo-Klassen:
Den clear: left; Eigenschaft zwingt die Schaltfläche um eine neue Zeile der matrix. Es ist, weil der .btn Klasse hat die float: left; Eigenschaft.
Eingerichtet border-radius und margin Eigenschaften in ähnlicher Weise wie die btn-group Klasse ist beschrieben in der bootstrap.css Datei.

3×3-matrix

Bitte überprüfen Sie das Ergebnis:

CSS:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* The heart of the matter */
.btn-matrix > .btn:nth-child(3n+4) {
  clear: left;
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
  margin-top: -1px;
}
.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix {
  margin: 20px;
}

HTML:

<div class="btn-group btn-matrix">
  <button type="button" class="btn btn-default">Button 1</button>
  <button type="button" class="btn btn-default">Button 2</button>
  <button type="button" class="btn btn-default">Button 3</button>
  <button type="button" class="btn btn-default">Button 4</button>
  <button type="button" class="btn btn-default">Button 5</button>
  <button type="button" class="btn btn-default">Button 6</button>
  <button type="button" class="btn btn-default">Button 7</button>
  <button type="button" class="btn btn-default">Button 8</button>
  <button type="button" class="btn btn-default">Button 9</button>
</div>

X×Y-matrix

Den code hängt nur von X:

.btn-matrix > .btn:nth-child(Xn+X+1) {
  clear: left;
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+X+1) {
  margin-top: -1px;
}
.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(X) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(X) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

Vielen Dank. Es ist genau das, habe ich gefragt
Diese meist noch arbeiten in der bootstrap-4, aber Sie müssen hinzufügen .btn-matrix { flex-wrap: wrap; } oder die Tasten nicht herum wickeln.

InformationsquelleAutor Gleb Kemarsky

1

Geändert @Pranjal Antwort ein bisschen wegen folgendem Grund:
- dem bootstrap grid (row, col,... etc) schafft Zeilen, die per definition 12 Spalten breit
Aufgrund dieser erstellen wir ein div mit der Klasse Zeile für jede Zeile der 3 Tasten. Auch wir möchten, dass die Schaltflächen, die werden 1/3 der Breite der Zeile (12 Spalten), so geben wir ihm die Klasse "col-md-4" (12 geteilt durch 3).

HTML:
```
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">            
  <div class="row">          
    <div class="btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 1</button>
      <button type="button" class="btn btn-default col-md-4">Button 2</button>
      <button type="button" class="btn btn-default col-md-4">Button 3</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 4</button>
      <button type="button" class="btn btn-default col-md-4">Button 5</button>
      <button type="button" class="btn btn-default col-md-4">Button 6</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-4">Button 7</button>
      <button type="button" class="btn btn-default col-md-4">Button 8</button>
      <button type="button" class="btn btn-default col-md-4">Button 9</button>
    </div>
  </div>
</div>
```
- Danke für deine Antwort. Kann ich die linken und rechten Seiten der matrix mehr gerade? (wie .btn-group-vertical-Klasse macht es)
- Dann müssten Sie machen eine Zeile, die enthält 3 Spalten (col-md-4). In jede Spalte, die Sie würde eine vertikale button-group. Doch diese geben die mittlere Gruppe, die das gleiche layout, so dass Sie haben zu spielen, um etwas zu finden, das gewünschte Ergebnis.
- Ich möchte gerade Linien am oberen und unteren Ende der matrix, so löst es nicht das problem. Ich denke, über das Zusammenführen .btn-group und .btn-group-vertical in irgendeiner Weise, vielleicht durch edite css-Dateien oder überschreiben. Aber ich bin nicht gut in css.
- Ja custom CSS erforderlich. Probieren Sie es aus und stellen Sie eine neue Frage, wenn Sie stecken bleiben 🙂 Diese Frage kann geschlossen werden, nehme ich an.
InformationsquelleAutor Ruben Pirotte

Können Sie Folgendes versuchen:

    <div class="row">
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 1</button>
            <button type="button" class="btn btn-default">Button 2</button>
            <button type="button" class="btn btn-default">Button 3</button>
        </div>
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 4</button>
            <button type="button" class="btn btn-default">Button 5</button>
            <button type="button" class="btn btn-default">Button 6</button>
        </div>
        <div class="col-md-1 btn-group">
            <button type="button" class="btn btn-default">Button 7</button>
            <button type="button" class="btn btn-default">Button 8</button>
            <button type="button" class="btn btn-default">Button 9</button>
        </div>
    </div>

danke. was über den geraden Linien von den Seiten der matrix?

InformationsquelleAutor Pranjal

Ich Denke, das wird hilfreich sein für Sie.Versuchen Sie diese ein.

CSS:

button{
  margin-right:14px!important;
  }

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">            
  <div class="row">          
    <div class="btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 1</button>
      <button type="button" class="btn btn-default col-md-3">Button 2</button>
      <button type="button" class="btn btn-default col-md-3">Button 3</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 4</button>
      <button type="button" class="btn btn-default col-md-3">Button 5</button>
      <button type="button" class="btn btn-default col-md-3">Button 6</button>
    </div>
  </div>
  <div class="row">
    <div class=" btn-group">
      <button type="button" class="btn btn-default col-md-3">Button 7</button>
      <button type="button" class="btn btn-default col-md-3">Button 8</button>
      <button type="button" class="btn btn-default col-md-3">Button 9</button>
    </div>
  </div>
</div>

Ist das das, was Sie wollen?

InformationsquelleAutor dulaj sanjaya

Für die Bootstrap-4 und wenn Sie ungleich text, die Bedürfnisse zu wickeln.

.btn-matrix > .btn:nth-child(3n+4) {
  clear: left;
  margin-left: 0;
}
.btn-matrix > .btn:nth-child(n+4) {
  margin-top: -1px;
}
.btn-matrix > .btn:first-child {
  border-bottom-left-radius: 0;
}
.btn-matrix > .btn:nth-child(3) {
  border-top-right-radius: 4px !important;
}
.btn-matrix > .btn:nth-last-child(3) {
  border-bottom-left-radius: 4px !important;
}
.btn-matrix > .btn:last-child {
  border-top-right-radius: 0;
}

/* Decorations */
.btn-matrix { flex-wrap: wrap; }
/* force wrap text */
 .btn-matrix .btn{
white-space: normal !important;
}


<div class="btn-group btn-matrix">
  <a class="btn btn-sm btn-default col-sm-4">Button 1 Extra Content</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 2</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 3</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 4</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 5</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 6</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 7</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 8</a>
  <a  class="btn btn-sm btn-default col-sm-4">Button 9</a>
</div>

InformationsquelleAutor user1594257

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.