9
votes

BottesTrap 3.0 en ligne en ligne Tags

J'ai la pièce de code suivante: xxx


L'objectif est d'avoir à la fois le

et le

côte l'un à l'autre, sur la même ligne de base. A ce stade, l'élément

est de bien au-dessus de la ligne.

J'ai essayé de mettre cela dans cans et d'autres "trucs" et d'autres "trucs" Comme vertical-align: bas . Pour une raison quelconque, je ne peux tout simplement pas que cela ne puisse tout simplement pas obtenir cela sur la même ligne et la même hauteur de ligne comme celle-ci:

Rubrique Deuxième titre


0 commentaires

4 Réponses :


0
votes

Vérifiez le violon

http://jsfiddle.net/vccz6/2/

Vous avez un mauvais flotteur dans votre H2 et voici un reste de CSS qui est nécessaire. P>

.well h2, .well h4 {
    display: inline-block;
    vertical-align: baseline;
    line-height: 100%;
}


1 commentaires

J'ai essayé cela sans succès. Même quand j'ai ajouté une marge: 0PX; et un rembourrage: 0px; Tout en ajoutant ces 0 marge / rembourrage, il est venu un peu plus près de mon point. Également essayé de changer de base en bas.



17
votes

J'allais juste travailler de la première réponse, mais voici une réponse plus complète:

http: // bootply.com/79703

Le HTML: xxx

le CSS: xxx < p> Deux choses se passent ici. Premièrement, nous avons laissé tomber des flotteurs inutiles sur les en-têtes, ainsi que le Clearfix Div complètement inutile. Pour une référence future, vous n'avez pas besoin de joindre un Clearfix à une DIV distincte.

Deuxièmement, je suggérerais de créer une nouvelle classe, au lieu de remplacer le comportement de la classe de puits comme exemple de l'exemple de MasterPoint, au cas où Vous voulez déjà que le puits de style H2S et H4S normalement.


1 commentaires

Oui, cela fait l'affaire. Apparemment, le Clearfix et le flotteur ne sont pas nécessaires. Votre HTML a fait cela maintenant clair pour moi.



23
votes

surpris qu'il n'a pas été mentionné, mais une autre façon serait d'utiliser les classes de rubrique.

<span class="h2 pull-left">heading</span>
<span class="h4">second heading</span>


2 commentaires

Cela fonctionne parfaitement pour les styles assortis, mais, en fonction de vos besoins, la réponse acceptée est correcte de manière sucrée.


Cela devrait être la réponse acceptée car elle utilise les cours de bootstrap OOB



5
votes

Bootstrap a une prise en charge intégrée aux en-têtes secondaires avec . xxx

http://getbootstrap.com/css/#type-headings


0 commentaires