1
votes

Les colonnes de la grille ne s'enroulent pas comme prévu

J'ai la structure de colonne bootstrap-4 suivante:

[A]
[B]
[C]

La disposition de colonne attendue en fonction de la taille de l'écran est:

XS:

[A][B][C]

SM et plus:

[  A ]
[B][C]

Cependant, en XS, chaque div prend toute la largeur comme ceci:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4">A</div>
    <div class="col-xs-6 col-sm-4">B</div>
    <div class="col-xs-6 col-sm-4">C</div>
  </div>
</div>

css bootstrap-4 twitter-bootstrap bootstrap-grid

0 commentaires

4 Réponses :

0
votes

Déplacer "div class row" une ligne ci-dessous résoudra votre problème.

0 commentaires

3
votes

col-xs- * n'existe tout simplement pas sur Bootstrap

Les options de grille sont:

col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*

^{Soucre: https: //getbootstrap.com/docs/4.0/layout/grid/#grid-options}

Vous vouliez donc probablement utiliser col- *

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          A
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          B
        </div>
      </div>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <div class="card">
        <div class="card-body">
          C
        </div>
      </div>
    </div>
  </div>
</div>

.row {
  background: #E2E2E2;
}

.card {
  border: solid 1px #6c757d;
}

1 commentaires

Oui! En gros la même réponse ^^

2
votes

Vous utilisez col-xs- mais il n'existe pas dans Bootstrap version 4.x. Donc, le petit point d'arrêt est en fait le premier défini mobile et plus.

Si vous avez l'intention d'avoir B & C pour être la moitié de la taille sur mobile, je suggère de le programmer comme ceci :

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    A
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    B
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4">
            <div class="card text-center">
                <div class="card-body">
                    C
                </div>
            </div>
        </div>
    </div>
</div>

Sinon, déplace le point d'arrêt de sm jusqu'à md.

0 commentaires

0
votes

J'ai testé votre code sur "codepen.io" et fonctionne très bien. Peut-être que le "CDN" utilisé par "jsfiddle" est une version qui ne rend pas les classes de la manière appropriée. Il est important que vous utilisiez un "CDN" ou que vous téléchargiez les fichiers sur votre ordinateur (.js, .css, etc.), qu'ils prennent en charge la version Bootstap que vous utilisez.

0 commentaires