web-dev-qa-db-fra.com

Comportement non réactif Bootstrap 3 "btn-group" sur de petits écrans

Existe-t-il un bootstrap 3 façons de gérer les petites tailles d'écran pour "btn-group"?

Le groupe de boutons est placé dans <td> et entouré de <div class="btn-group">:

btn-group

On dirait bien, jusqu'à ce que vous redimensionnez à <768px. Ensuite vous avez:

enter image description here

Comment les rendre persistants? J'ai essayé d'ajouter la classe btn-group-justified. Mais cela donne des boutons sur toute la largeur et est encore pire lors de la réduction du format d’écran.

P.S> J'ai une idée, comment l'implémenter en ajoutant un ensemble complet de classes personnalisées. Ma question concerne la manière bootstrap3. Peut-être que j'ai raté quelque chose.

htmlcsstwitter-bootstrap-3
26
Ilia Shakitko

Je veux vous proposer une version avec des icônes de FontAwesome . Avec une résolution d'écran minimale, le texte ne cache que les icônes. 

Désolé pour mon anglais.

<div class="btn-group">
    <button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>
    <button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button>
</div>

UPDATE by Vishal Kumar : ajouter un aperçu de GLYPHICONS

Vérifiez ce violon: http://jsfiddle.net/Jeen/w33Gd/4/

18
Jeen Jay

Vous pouvez créer deux groupes de boutons avec les mêmes boutons et en faire un btn-group-vertical. Ensuite, après leur avoir appliqué les codes hidden-xs et visible-xs, vous pouvez masquer et afficher le groupe vertical sur la taille d'écran appropriée.

<div class="btn-group hidden-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>
<div class="btn-group-vertical visible-xs">
    <button class="btn btn-default">View</button>
    <button class="btn btn-default">Delete</button>
</div>

Malheureusement, cela nécessite de répéter le balisage des boutons, mais cela ne devrait pas être un problème si vous utilisez un outil de modélisation (définissez le balisage une fois et incluez-le deux fois).

Écran large:

Wide screen buttons

Ecran étroit:

Narrow screen buttons

Voir le JSFiddle .

24
fracz

Voici une alternative à la réponse de @ fracz que vous pouvez essayer sans dupliquer le contenu HTML. Il suffit de copier les fichiers css de btn-vertical-group et btn-group et d’utiliser une requête multimédia. 

Tout ce que vous avez à faire est d’ajouter btn-toolbar-responsive aux classes de la barre d’outils div. 

C'est en scss pour la simplicité bien que vous puissiez le convertir en ligne facilement. Voici le JS Bin: demo

SCSS:

.btn-toolbar.btn-toolbar-responsive{
  text-align: center;
  margin: 0;
  .btn-group{
    float: none;
  }

  @media (max-width: 767px){
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
      margin-top: -1px;
      margin-left: 0;
    }


    .btn-group{
      position: relative;
      display: block;
      vertical-align: middle;
      margin: 0;
      .btn {
        display: block;
        float: none;
        max-width: 100%;

      }
      .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
      .btn:last-child:not(:first-child) {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

    }
    .btn-group:not(:first-child):not(:last-child) {
      .btn {
        border-radius: 0;
      }
    }

    .btn-group:first-child:not(:last-child) {
      .btn:last-child, .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .btn-group:last-child:not(:first-child) {
      .btn:first-child {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

}
3
Jose Castellanos

essayez de définir min-width on <td>

<td style="min-width: 90px">
    <div class="btn-group">
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-check"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-question"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-times"></i>
        </button>
    </div>
</td>
2
Leon Matz

Ok, donc cela a fonctionné dans une page de test que j'ai faite:

<div class='btn-group'>
    <button class='btn btn-default col-xs-6'>View</button>
    <button class='btn btn-default col-xs-6'>Delete</button>
</div>

Forcer chaque bouton à utiliser 50% à l'aide de col-xs-6 l'a empêché de s'afficher dans ma propre page de test, inspirée de votre exemple. Cependant, si vous avez un tableau plus large que l'exemple et que vous réduisez à 320 pixels, le texte débordera les boutons et il semblera encore pire que votre mauvais exemple.

Vous le savez peut-être déjà et ce n'est peut-être pas pratique dans votre cas. Je m'excuse si je ne présente que des exemples inutiles. Toutefois, si votre table est beaucoup plus large que ce que vous avez posté à titre d'exemple, je vous suggèrerais de créer vos lignes en utilisant la grille BS au lieu d'une table. Cela vous permet de faire en sorte qu'une seule ligne devienne deux lignes lorsque la page est réduite, par ex.

<div class='row'>
    <div class='col-xs-12 col-sm-6'>Some additional details</div>
    <div class='col-xs-6 col-sm-3'>Date</div>
    <div class='col-xs-6 col-sm-3'>
        <div class='btn-group'>
            <button class='btn btn-default col-xs-6'>View</button>
            <button class='btn btn-default col-xs-6'>Delete</button>
        </div>
    </div>
</div>

ensuite, il vous suffit de trouver un moyen d'alterner les couleurs, d'ajouter des bordures ou tout ce dont vous avez besoin pour afficher la séparation entre les lignes.

Comme je l'ai dit, dans le BootPly que je viens de créer, les boutons commencent à se chevaucher à de très petites tailles, mais ils ne sont pas bouclés lorsqu'ils se trouvent dans un <td> dans les tests de mon navigateur:

http://www.bootply.com/117330

2
Kevin Nelson
<div id="secondNav" class="btn-group" role="group">
    <button class='btn btn-default'>View</button>
    <button class='btn btn-default'>Delete</button>
</div>

Vous pouvez accomplir cela avec un simple jQuery

<script>
$(window).resize(function() {
    justifyBtnGroup('secondNav');
});

function justifyBtnGroup(id) {
    var btnGroup = $('#' + id);
    if($(window).width() > 768) {
        btnGroup.addClass('btn-group').removeClass('btn-group-vertical');
    } else {
        btnGroup.removeClass('btn-group').addClass('btn-group-vertical');
    }
}
justifyBtnGroup('secondNav'); // will run when page loads
</script>
0
Stosh15