Dev Faq
0
votes

Bootstrap - Comment éviter la rupture de ligne sur de grands écrans

Ma question est la suivante:

Comment puis-je vous débarrasser de la linefreak dans le numéro 3)? H2>

J'ai l'exemple suivant: P> 

<div class="container align-items-center justify-content-center mt-4">
  <div class="row">
    <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-6 offset-xs-3">
      <div class="page-header">
        <h1>Change Password</h1>
      </div>
    </div>
  </div>
</div>

3 commentaires

Quand la fenêtre devient plus grosse, le chevreak se produit?

Oui, vérifiez le violon!

J'ai demandé parce que ça ne se passe pas de mon côté.

3 Réponses :

1
votes

Vous pouvez utiliser Text-Nowrap sur l'en-tête de la page. xxx

Vous pouvez également simplifier la structure de la colonne. FYI, il n'y a pas de botte de bootstrap 4. Cela faisait col-xs-6 ne rien faire et deviennent donc une largeur complète sur le plus petit écran.

https://codeply.com/p/bd5r4hpfdh

0 commentaires
2
votes

in bootstrap, vous avez une classe Text-Nowrap que vous pouvez jouer avec en fonction des différentes tailles d'écran. en fonction de vos besoins, vous pouvez appliquer l'un d'entre eux ci-dessous: xxx

et parce que vous avez dit là-bas devriez-vous si La fenêtre est petite, vous voudriez utiliser text-lg-nowrap avec votre exemple.

1 commentaires

Ne fonctionne pas dans Bootstrap 4+ Version: getbootstrap.com /docs/4.3/uties/text/...

0
votes

vous ne pouvez pas. strong>

Il n'y a pas de moyen possible dans bootstrap 4 code> Pour faire ou ne pas un Nowrap code> en fonction du taille de l'écran. Pas même dans bootstrap 5 code>. P>

Ainsi, par exemple si vous souhaitez avoir un élément avec Nowrap code> activé uniquement lorsque l'écran est 992px ou plus grand (bureau ) Vous devriez écrire quelque chose comme celui-ci dans votre CSS code>: p> xxx pré>

et écrivez ceci dans votre html code>: p > 

<div class="container align-items-center justify-content-center mt-4">
  <div class="row">
    <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-6 offset-xs-3">
      <div class="page-header">
        <h1 class="dontWrapIt">Change Password</h1>
      </div>
    </div>
  </div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
datetimepicker ne fonctionne pas avec bootstrap 4?
Le menu déroulant ne fonctionne pas avec Bootstrap 4 et Laravel 6
Créer un dégradé personnalisé dans bootstrap 4 à l'aide de la fonction SASS theme-color-level