Maison > interface Web > Tutoriel d'amorçage > Comment implémenter les barres de défilement dans bootstrap

Comment implémenter les barres de défilement dans bootstrap

WBOY
Libérer: 2022-02-15 10:08:12
original
6802 Les gens l'ont consulté

Méthode d'implémentation : 1. Utilisez la classe de composition "

<div class="pre-scrollable">" pour implémenter la barre de défilement ; 2. Utilisez "
" implémente les barres de défilement.

Comment implémenter les barres de défilement dans bootstrap

L'environnement d'exploitation de ce tutoriel : système Windows 10, version bootstrap 3.3.7, ordinateur DELL G3

Comment implémenter les barres de défilement dans bootstrap

Un : Ajouter un style bootstrap pour ajouter des barres de défilement

En fait , à condition qu'il se trouve dans l'attribut class du module concerné, plus pré-défileable.

Par exemple, ajoutez un pré-défilement dans

 :
<div class="pre-scrollable">
Copier après la connexion

Comment implémenter les barres de défilement dans bootstrap

Deuxième : ajoutez des barres de défilement en définissant le débordement

<div   style="max-width:90%"oubliez pas que la largeur et la hauteur doivent être définies, sinon cela ne fonctionnera pas, mais si vous ne le faites pas Lorsqu'il est dépassé, il y aura une barre de défilement en dessous, ce n'est donc pas le meilleur choix </p><p><img src="https://img.php.cn/upload/image/676/898/602/1644890761462693.png" title="1644890761462693.png" alt="Comment implémenter les barres de défilement dans bootstrap"/></p><pre class="brush:html;toolbar:false"><div   style="max-width:90%"oubliez pas que la largeur et la hauteur doivent être définies, sinon cela ne fonctionnera pas. c'est que lorsque la largeur et la hauteur ne dépassent pas , juste une ligne </p><p><img src="https://img.php.cn/upload/image/360/751/900/1644890770322405.png" title="1644890770322405.png" alt="Comment implémenter les barres de défilement dans bootstrap"/></p><p>Trois : spécifiez simplement l'attribut de débordement comme auto pour le div directement, mais la hauteur du div doit être spécifiée, comme suit : </p><pre class="brush:html;toolbar:false"><div   style="max-width:90%"></div>
Copier après la connexion

. Comment implémenter les barres de défilement dans bootstrap

Si vous souhaitez qu'une barre de défilement horizontale apparaisse, alors : overflow-x :auto

De même, la barre de défilement verticale est : overflow-y:auto

Si le div est inclus dans d'autres objets tels que td, le la position peut être définie sur relative : position : relative

Trois : Masquer la barre de défilement

{overflow : caché !important;} ou {overflow-x : caché ; caché;} peut masquer l'axe des x ou Barres de défilement de l'axe Y respectivement

Recommandations associées : Tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal