Dev Faq
0
votes

Bootstrap, étirement de la dernière colonne

J'ai cette mise en page faite avec Bootstrap chaque witdth est de 4 unités Courant
C'est ce que je suis en train d'essayer de faire du
Recherché

En gros, je veux que les derniers éléments s'étirent pour remplir.
S'il n'y avait que quatre éléments de la dernière dernière devrait être une largeur complète.

ma tentative

J'ai essayé d'ajouter flex-remplissage et flex-poussser -1 à chaque colonne, mais il ne semble pas changer quoi que ce soit.

puis-je atteindre cet effet avec JS?

Code < / h2> xxx

0 commentaires

4 Réponses :

0
votes

Utilisez Utilitaire égale à largeur de bootstrap. Divisez la zone en 2 rangées avec la même largeur (Col-MD-8 ici), puis placez autant de divs de largeur égale.

échantillon ci-dessous: strong> p>

P>

P> P> P > 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="d-flex justify-content-around row">

       <!-- row-1 -->
       <div class="row col-md-8">
		 <div class="my-2 col">
          <div class="card">
            <div class="card-body">
              <div class="card-title">One</div>
            </div>
          </div>
        </div>
        <div class="my-2 col">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Two</div>
            </div>
          </div>
        </div>
        <div class="my-2 col">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Three</div>
            </div>
          </div>
        </div>
	   </div>

	   <!-- row-2 -->
	   <div class="row col-md-8">
	   
		<div class="my-2 col">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Four</div>
            </div>
          </div>
        </div>
		
        <div class="my-2 col">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Five</div>
            </div>
          </div>
        </div>
	  
      </div>
    </div>

0 commentaires
0
votes

Vous pouvez créer à l'aide de 'égal-largeur' , pour plus de détails passer par le système de grille Bootstrap 4.

https://getbootstrap.com/docs/4.0/layout/ grille / # égale-largeur

0 commentaires
0
votes

En supposant que les colonnes par défaut ont une largeur 4, comme COL-MD-4 , je peux suggérer l'approche suivante:

Ne spécifie pas la largeur de la colonne dans le HTML et justifier le contenu Uniformément: xxx

puis réglez la taille minimale de toutes les colonnes: xxx

1 commentaires

Simple et sans créer une autre ligne. Exactement ce que je cherchais. Merci

0
votes

Bootstrap propose de nombreuses solutions différentes pour atteindre plusieurs vues. Ce que vous essayez jusqu'à présent, c'était presque correct. Cependant, votre dernier col est actuellement à la recherche d'un peu mal. Vous pouvez échanger vos derniers classes C col par les éléments suivants.

Cela fait simplement 2 choses.

  1. en utilisant col Vous laissez Flexbox décider de la quantité d'espace à prendre
  2. Ajout flex-garm Vous indiquez à utiliser Flexbox d'utiliser et de remplir tout espace gauche
0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor