Twitter Onglet Bootstrap: Comment: Augmenter l'espacement entre les onglets

J'utilise ui bootstrap pour angular (qui utilise twitter bootstrap css). J'étais capable de centrer les onglets, mais je n'arrive pas à comprendre comment ajouter de l'espacement (les marges) entre les onglets (DROITE OU GAUCHE). J'ai essayé d'ajouter margin-right: 100px; dans .nav-tabs> li mais cela n'a pas fonctionné.Twitter Onglet Bootstrap: Comment: Augmenter l'espacement entre les onglets

Html:

<html> 
    <body> 

       <tabbed-Panel class="bottomTabPanel"> 
      <!--<div data-fade="1" ngModel="activeTab" bs-Tabs>--> 
      <tabs> 
       <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active"> 
        <div ng-include src="activeContent()"></div> 
       </pane> 
      </tabs> 
      <!--</div>--> 
     </tabbed-Panel> 
      </div 
    </body> 
</html>

Css

.bottomTabPanel{ 

    position:absolute; 
    bottom:-12px; 
    display:block; 
    background-color:#666666; 
    padding-left: 75px; 
    padding-right: 75px; 
} 
    /*Bottom tab panel style: */ 
    .nav-tabs>li>a { 
     height:73px; 
     width: 131px; 
     border: 1px solid transparent; 
     -webkit-border-radius: 0px 0px 0 0; 
     -moz-border-radius: 0px 0px 0 0; 
     border-radius: 0px 0px 0 0; 
     color: #5261ac; 
     font-size: 19px; 
     font-weight:bold; 
     background-color:#c2c8e4; 


    } 

    .nav-tabs>.active>a, .nav-tabs>.active { 
     color: #ffffff; 
     cursor: default; 
     background-color:#ed174f; 
     border:none; 
    } 
     /* center tabs in container */ 
    .nav-tabs > li { 
     float:none; 
     display:inline-block; 
     margin-right: 100px; 
    } 
    .nav-tabs { 
     text-align:center; 
    } 

     /* for centering text in the tab*/ 
    .tabbable ul { 
      display:table-row; 
     } 
     .tabbable ul li 
     { 
      display: table-cell; 
      list-style-type: none; 
      vertical-align: middle; 
      /*margin left & right here fixed the issue! */ 
      margin-right: 16px; 
      margin-left: 16px; 
     } 
     .tabbable ul li a { 
      display:table-cell; 
      vertical-align: middle; 
      text-align:center; 

     }

Source

2013-06-03 Mike6679

Set margin-left et margin-right de .nav-tabs > li > a, .nav-pills > li > a. Le margin-right est 2px par défaut.

b.e:

.nav-tabs > li > a, .nav-pills > li > a {margin-left:25px;margin-right:27px;}

Source

2013-06-04 07:13:27

Votre code fonctionnerait, cependant, mon code pour centrer le texte pour chaque onglet (horizontalement et verticalement) l'écrase. Voir code après commentaire:/* pour centrer le texte dans l'onglet * /. Pensées? – Mike6679

pouvez-vous montrer la source comtete html? Par défaut, le centrage est effectué par remplissage. Alors essayez: '.tabbable ul li a {line-height: 20px; rembourrage-bas: 8px; padding-top: 8px;} 'et' .tabbable ul> li> a { rembourrage-gauche: 12px; rembourrage-droit: 12px; ' –

Ajout marge droite & marge gauche à .tabbable ul li a créé les marges je avais besoin. Merci à Bass Jobsen de m'avoir indiqué la bonne direction.

.tabbable ul li 
      { 
       display: table-cell; 
       list-style-type: none; 
       vertical-align: middle; 
       /*margin left & right here fixed the issue! */ 
       margin-right: 16px; 
       margin-left: 16px; 
      }

Source

2013-06-04 14:17:52 Mike6679

Twitter Onglet Bootstrap: Comment: Augmenter l'espacement entre les onglets

Répondre

Questions connexes