Comment je peux faire de nice à la recherche de la matrice de boutons avec bootstrap 3?

J'ai quelque chose comme ça:

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>

Et je voudrais avoir de la matrice de boutons de 3x3. Une chose de plus, de droite et de gauche doit ressembler à cet exemple (lignes droites):

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>

Comment je peux le faire? Peut-être que j'ai besoin d'ajouter un peu de classe de bootstrap ou de modifier le fichier css?

InformationsquelleAutor Vadym Perepeliak | 2016-07-08

Un groupe de boutons + quelques pseudo-classes

Utiliser un seul bloc avec le .btn-group classe.
Appliquer un ensemble de propriétés CSS en utilisant des pseudo-classes:
La clear: left; propriété forces sur le bouton pour commencer une nouvelle ligne de la matrice. C'est parce que la .btn la classe a l' float: left; propriété.
Configurer border-radius et margin propriétés d'une façon similaire à la btn-group classe est décrite dans le bootstrap.css fichier.

Matrice 3×3

Veuillez vérifier le résultat:

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 de la matrice

Le code ne dépend que de 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;
}

Merci beaucoup. C'est exactement ce que j'ai demandé à ce sujet
La plupart du temps cela fonctionne toujours dans le bootstrap 4, mais vous devez ajouter .btn-matrice { flex-wrap: wrap; } ou les boutons ne sont pas autour.

InformationsquelleAutor Gleb Kemarsky

1

Modifié @Pranjal répondre un peu à cause des raisons suivantes:
- le bootstrap grid (row, col... etc) crée des lignes qui sont, par définition, les 12 colonnes de large
À cause de cela nous avons créer un div avec la classe de ligne pour chaque rangée de 3 boutons. Aussi, nous voulons que les boutons de l'être de 1/3 de la largeur de la ligne (12 colonnes), de sorte que nous lui donnons la catégorie "col-md-4" (12 divisé par 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>
```
- Merci pour votre réponse. Puis-je faire des côtés gauche et droit de la matrice de plus droit? (comme .btn-group-verticale de la classe en fait)
- Alors que vous auriez à faire une ligne, qui contient 3 colonnes (col-md-4 de chaque). Dans chaque colonne, vous pouvez placer un bouton vertical du groupe. Toutefois, cela donnera le groupe du milieu de la même mise en page de sorte que vous avez à jouer un peu pour trouver le résultat souhaité.
- Je voudrais avoir des lignes droites en haut et en bas de la matrice, de sorte qu'il ne résout pas le problème. Je pense au sujet de la fusion .btn-group et .btn-group-verticale, d'une certaine façon, peut-être, par edite des fichiers css ou les remplacer. Mais je ne suis pas bon à la css.
- Oui CSS personnalisé sera nécessaire ensuite. Essayez-le et faites une nouvelle question quand vous êtes coincé 🙂 Cette question peut être fermé je suppose.
InformationsquelleAutor Ruben Pirotte

Vous pouvez essayer ce qui suit:

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

merci. qu'en lignes droites sur les côtés de la matrice?

InformationsquelleAutor Optimus

Je Pense que ce sera utile pour vous.Essayez celui-ci.

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>

C'est ce que vous voulez?

InformationsquelleAutor dulaj sanjaya

Pour Bootstrap 4 et si vous avez l'inégalité de texte qui doit envelopper.

.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

Vous devez vous connecter pour publier un commentaire.