webentwicklung-frage-antwort-db.com.de

Wie kann ich mit Bootstrap 3 eine gut aussehende Matrix von Knöpfen erstellen?

Ich habe so etwas:

<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 hätte gerne eine Matrix von Tasten 3x3. Eine weitere Sache, linke und rechte Seite müssen wie folgt aussehen (gerade Linien):

<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 schaffen? Vielleicht muss ich eine Bootstrap-Klasse hinzufügen oder eine CSS-Datei bearbeiten?

htmlcsstwitter-bootstraptwitter-bootstrap-3buttongroup
6
Vadym Perepeliak

Eine Gruppe von Knöpfen + einige Pseudoklassen

  1. Verwenden Sie nur einen Block mit der Klasse .btn-group.

  2. Anwenden einer Reihe von CSS-Eigenschaften mithilfe von Pseudoklassen:

  3. Die Eigenschaft clear: left; zwingt die Schaltfläche, eine neue Zeile der Matrix zu beginnen. Das liegt daran, dass die Klasse .btn die Eigenschaft float: left; hat.

  4. Richten Sie die Eigenschaften border-radius und margin auf ähnliche Weise wie die Klasse btn-group ein, die in der Datei bootstrap.css beschrieben ist.

3 × 3 Matrix

Bitte überprüfen Sie das Ergebnis:

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

Der Code hängt nur von X ab:

.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;
}
13
Gleb Kemarsky

Geänderte @ Pranjal-Antwort aus folgendem Grund:

  • das Bootstrap-Gitter (row, col -... etc) erzeugt Zeilen, die per Definition 12 Spalten breit sind

Aus diesem Grund erstellen wir für jede Zeile mit 3 Schaltflächen ein Div mit Klassenzeile. Außerdem möchten wir, dass die Schaltflächen 1/3 der Breite der Zeile (12 Spalten) haben, also geben wir ihr die Klasse "col-md-4" (12 geteilt durch 3).

<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>
0
Ruben Pirotte

Sie können 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>
0
Pranjal

Ich denke, das wird hilfreich für Sie sein. Versuchen Sie dieses.

button{
  margin-right:14px!important;
  }
<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>
0
dulaj sanjaya

Für Bootstrap 4 und wenn Sie ungleichen Text haben, der umgebrochen werden muss.

.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>
0
user1594257