1
votes

Bootstrap 4 rend les boutons réactifs

J'essaye de créer des boutons centrés dans Bootstrap 4 pour un projet. Je suis un débutant dans le codage et jusqu'à présent, j'ai atteint cet objectif et je veux qu'ils s'empilent lorsqu'ils sont affichés sur une tablette et des appareils mobiles. À l'heure actuelle, ils se superposent sur les appareils mobiles et les tablettes.

Toute aide que vous pourriez fournir serait grandement appréciée. :)

Mon code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
		<div class="row text-center">
			<div class="col-10 offset-1">

				<button class="btn btn-primary mr-2 select-all">Select All Items</button>
				<button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
				<button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
				<button class="btn btn-primary mr-2 clear-all">Clear All</button>
				<button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
				<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
					<button class="dropdown-item select-1" type="button">Items 1</button>
					<button class="dropdown-item select-2" type="button">Items 2</button>
					<button class="dropdown-item select-3" type="button">Items 3</button>
					<button class="dropdown-item select-4" type="button">Items 4</button>
				</div>
			</div>
		</div>
	</div>

bootstrap-4 twitter-bootstrap

0 commentaires

3 Réponses :

1
votes

Essayez peut-être quelque chose comme la coque de menu mobile ... Je veux dire ... ce sera une sorte de duplication d'éléments html mais vous pourriez essayer ceci. Créez le bouton déroulant et mettez à l'intérieur les boutons que vous avez déjà et définissez la résolution du bureau comme affichage: aucun; Les boutons que vous venez de définir dans la requête multimédia mobile comme affichage: aucun;

Le résultat devrait être que sur la largeur du bureau de la page, vous devriez avoir des boutons normaux placés séparément, et sur mobile, vous devriez voir un bouton déroulant avec vos boutons à l'intérieur.

0 commentaires

1
votes

La grille Bootstrap 4 peut vous aider à y parvenir. Vous trouverez ci-dessous une version mise à jour de votre extrait de code qui crée des boutons réactifs, qui apparaissent horizontalement sur les grands écrans et verticalement sur les écrans de petite et moyenne taille.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
  <div class="row"> 
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 select-all">Select All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2" id="latencybutton">New Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 clear-all">Clear All</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                              <button class="dropdown-item select-1" type="button">Items 1</button>
    	                        <button class="dropdown-item select-2" type="button">Items 2</button>
    	                        <button class="dropdown-item select-3" type="button">Items 3</button>
    	                         <button class="dropdown-item select-4" type="button">Items 4</button>
                      </div>
    </div>
  </div>
 </div>

0 commentaires

1
votes

Enveloppez tous vos boutons dans un

  avec le  id  unique de votre choix. Ensuite, utilisez cet extrait de code: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid py-2">
  <div class="row text-center">
    <div class="col-10 offset-1">
      <div id="myGroup" role="group">
        <button class="btn btn-primary mr-2 select-all">Select All Items</button>
        <button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
        <button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
        <button class="btn btn-primary mr-2 clear-all">Clear All</button>
        <button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item select-1" type="button">Items 1</button>
          <button class="dropdown-item select-2" type="button">Items 2</button>
          <button class="dropdown-item select-3" type="button">Items 3</button>
          <button class="dropdown-item select-4" type="button">Items 4</button>
        </div>
    </div>
  </div>
</div>
  ... en remplaçant  #myGroup  par votre identifiant unique et  720  par la largeur souhaitée, selon Bootstrap's Système de grille  points d'arrêt de réactivité . 
  Voir ça marche: 
 
 

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})
$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})


  L'extrait applique la  variation verticale  a> du  .btn-group  de Bootstrap ( .btn-group-vertical ) au wrapper selon que la largeur de la fenêtre est inférieure à la largeur spécifiée. 
  La vérification est effectuée sur les événements  load  et  resize  de la fenêtre. Si vous souhaitez l'utiliser dans de nombreux endroits, vous voudrez peut-être limiter son exécution, car l'événement  resize  peut se déclencher de très nombreuses fois par seconde. 

Ce n'est pas un problème si vous ne l'utilisez qu'une seule fois, en particulier parce que la condition vérifiée et la manipulation DOM sont assez légères.

0 commentaires