Utiliser la légende du jeu de terrain avec le bootstrap

C’est parce que Bootstrap définit par défaut la largeur de l’élément de legend sur 100%. Vous pouvez résoudre ce problème en changeant votre legend.scheduler-border .

 legend.scheduler-border { width:inherit; /* Or auto */ padding:0 10px; /* To give a bit of padding on the left and right */ border-bottom:none; } 

JSFiddle exemple .

Vous devrez également vous assurer que votre feuille de style personnalisée est ajoutée après Bootstrap pour éviter que Bootstrap ne remplace votre style – bien que vos styles aient ici une spécificité plus élevée.

Vous pouvez également vouloir append margin-bottom:0; à elle aussi pour réduire l’écart entre la légende et le diviseur.

J’ai eu ce problème et j’ai résolu de cette façon:

 fieldset.scheduler-border { border: solid 1px #DDD !important; padding: 0 10px 10px 10px; border-bottom: none; } legend.scheduler-border { width: auto !important; border: none; font-size: 14px; } 

J’avais une approche différente, j’ai utilisé un panneau bootstrap pour le montrer un peu plus riche. Juste pour aider quelqu’un et améliorer la réponse.

 .text-on-pannel { background: #fff none repeat scroll 0 0; height: auto; margin-left: 20px; padding: 3px 5px; position: absolute; margin-top: -47px; border: 1px solid #337ab7; border-radius: 8px; } .panel { /* for text on pannel */ margin-top: 27px !important; } .panel-body { padding-top: 30px !important; } 

  
 
 
 
 Title 
 
 Your Code 
 
 
 
 

Dans bootstrap 4, il est beaucoup plus facile d’avoir une bordure sur le champ qui se fond dans la légende. Vous n’avez pas besoin de CSS personnalisé pour y parvenir, cela peut se faire comme ceci:

 
 
Your Legend
  

qui ressemble à ceci:

Je voulais juste résumer toutes les réponses correctes ci-dessus en bref. Parce que je devais passer beaucoup de temps à trouver la réponse qui résout le problème et ce qui se passe dans les coulisses.

Il semble y avoir deux problèmes de Champset avec bootstrap:

1. Le bootstrap définit la largeur sur la legend à 100%. C’est pourquoi il recouvre la bordure supérieure du fieldset .
2. Il y a une bottom border pour la legend .

Tout ce dont nous avons besoin pour corriger cela est de définir la largeur de la légende comme suit:

 legend.scheduler-border { width: auto; // fixes the problem 1 border-bottom: none; // fixes the problem 2 }