twitter bootstrap tabulation verticale hauteur de la bordure gauche

Je souhaite que la bordure verticale de l'onglet vertical s'exécute sur toute la page au lieu de terminer à la fin des onglets.twitter bootstrap tabulation verticale hauteur de la bordure gauche

expecting an output like this mais depuis que j'ai donné la frontière à droite de l'onglet, il termine

avec le dernier onglet qui est une tendance. Le fait de donner une bordure droite au contenu garantit que la hauteur de la bordure est correcte, mais cela gâche l'espacement entre l'onglet et le contenu.

HTML: -

<div class='tabbable tabs-left'> 
      <ul class='nav nav-tabs'> 
      <li class='active'> 
       <a href="/startups?startup=All">All</a> 
      </li> 
      <li> 
       <a href="/startups?startup=New">New</a> 
      </li> 
      <li> 
       <a href="/startups?startup=Featured">Featured</a> 
      </li> 
      <li> 
       <a href="/startups?startup=Ending+Soon">Ending Soon</a> 
      </li> 
      <li> 
       <a href="/startups?startup=Trending">Trending</a> 
      </li> 
      </ul> 
     </div>

Source

2013-08-13 Dev R

Pouvez-vous vous envoyer le code aussi? Ou un Bootply ou un violon? – ZimSystem

où est votre code source celui que vous avez essayer ce – falguni

le style vient de twitter bootstrap et je n'ai pas utilisé de style personnalisé, l'image est le résultat que je dois obtenir en html et css –

C'est pas par défaut le comportement Bootstrap de sorte que vous devrez modifier le css un peu. Pour que cela fonctionne, l'onglet vertical <ul> et tous ses parents doivent avoir la propriété height: 100%.

Pour html et je body appliquerait le style directement, mais pour le <div> et <ul> je voudrais utiliser la classe personnalisée afin de ne pas modifier les classes Bootstrap pour maintenir le comportement attendu pour une utilisation ultérieure éventuelle dans d'autres dispositions.

Voici un demo.

Le css ajouter:

html{ 
    height: 100%; 
} 

body{ 
    height: 100%; 
} 

.tabbable.tabs-left.full-height{ 
    height: 100%; 
} 

.nav.nav-tabs.full-height{ 
    height: 100%; 
}

Le html à ACTUALISATION:

<body> 
    <div class='tabbable tabs-left full-height'> 
     <ul class='nav nav-tabs full-height'> 
     ...........

Source

2013-08-13 15:33:25 edsioufi

twitter bootstrap tabulation verticale hauteur de la bordure gauche

Répondre

Questions connexes