L'accordéon Bootstrap 5 devient trop large lorsqu'il est étendu
P粉163465905
P粉163465905 2023-09-08 12:34:40
0
1
523

Je m'attendais à ce que le composant accordéon s'agrandisse pour correspondre à la largeur de son élément parent, mais lorsqu'il se développe, il se dilate non seulement lui-même, mais également l'élément parent, ce qui entraîne une forte compression du volet de gauche. Que faut-il faire pour obtenir le comportement souhaité ? J'apprécierais toutes les réponses.

  

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
tab2 content

J'ai essayé d'ajuster légèrement la largeur du titre en accordéon et son contenu, mais cela n'a pas fonctionné.

P粉163465905
P粉163465905

répondre à tous (1)
P粉536909186

#right-pane元素没有显式声明flex-basiswidth,因此它将占用所需的空间。当手风琴关闭时,它会按照您的预期工作,因为它的内容宽度较窄(然后由于flex-grow 中的flex-grow: 1,然后会增长以填充剩余空间-1catégorie). Cependant, lorsque le contenu de l'accordéon est affiché, celui-ci tentera d'occuper autant d'espace horizontal que possible.

Pour éviter cela, veuillez considérer #right-pane元素上设置某种flex-basiswidth,例如width :25%通过w-25` ici :

  

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
tab2 content
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!