Dev Faq
0
votes

Centrage de colonnes de bootstrap alignées par centrage avec des cartes à l'intérieur

J'essaie de centrer un ensemble de cartes Bootstrap alignées sur la gauche.

Je dois avoir le centre de diving de conteneur dans la grille principale et ensuite avoir les cartes alignées à gauche. P>

J'ai essayé d'utiliser "Justify-Content-Center" dans la ligne principale, mais cela ne fonctionne pas. P> 

<div class="container-fluid" style="  background-color: #999;" >
  <div class="row">
      <div class=col-1></div>
      <div class=col-10>
        
            <div class="container-fluid mt-4" style="  background-color: #ff0;" >
                <div class="row justify-content-left">
                    <div class="col-auto mb-3">
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto mb-3">
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto mb-3">
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>
 
                      <div class="col-auto mb-3">
                        <div class="card" style="width: 18rem;">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>
                        </div>
                    </div>

                   
                </div>
            </div>
        
        
        
      </div>
      
     <div class=col-1></div>
  
  </div>
</div>

2 commentaires

Dans votre code, vous avez

modifier vers
- voici ici Le violon - jsfiddle.net/5y02rw3j

Merci mais ce dont j'ai besoin, c'est que l'ensemble des cartes centrées et à la fois justifier les cases à gauche. Comme ça. i.Stack.imgur.com/4ablh.png

3 Réponses :

0
votes

Code mis à jour 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .card{margin-top: 10px;margin-bottom: 10px;}
    </style>
</head>

<body>



    <div class="container">
        <div class="row">

            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>

            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk
                            of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
</body>

</html>

5 commentaires

Merci pour la réponse, mais ce que je cherche, c'est que toutes les cartes alignées à gauche, mais tout le groupe axé, avec votre solution, la dernière carte est centrée lorsque la fenêtre est dans une certaine taille.

J'ai modifier le poteau et modifier les échantillons d'images pour rendre plus claire ce que je cherche.

@ user2675966 J'ai mis à jour le code et vous pouvez ajouter plus de cartes à tester si vous le souhaitez.

Merci! :) Il ne cesse de se produire si vous rendez la fenêtre plus large que vous verrez que tout l'ensemble s'aligne à gauche. Ce que je cherche, c'est Centre-Gone comme ceci: i.Stack.imgur.com/4AblH. png

Merci encore. Nous sommes plus proches, ce que je vois maintenant, c'est que les cartes sont réactives et que je dois avoir des cartes de largeur fixes: style = "largeur: 18rem;"

0
votes

Selon ma compréhension Ce que vous voulez, c'est que la grille soit centrée et que des cartes à gauche alignez-vous dans la colonne.

Ajoutez simplement le suivant CSS fort> à la ligne: p> 

.card {
    float: left;
 }

1 commentaires

Merci mais ce n'est pas ce que je cherche, j'ai besoin d'avoir tout le groupe centré sur le bleu div, comme dans cette image i.stack.imgur.com/4ablh.png

0
votes

J'ai eu une base d'idée dans le code de Jeetan et j'ai trouvé une solution à l'aide de requêtes de média que je connais est la meilleure solution mais fonctionne: xxx

https://jsfiddle.net/gozaro/xw786kl0/

La solution est corrigée la largeur du conteneur en fonction de la largeur de la fenêtre de vue.

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