Twitter Bootstrap標籤：如何：增加標籤之間的間距

我正在使用ui bootstrap for angular（使用twitter bootstrap css）。我能夠將選項卡居中，但我無法弄清楚如何在選項卡（右或左）之間添加間距（頁邊距）。我嘗試添加margin-right：100px;在.nav-tabs>裏，但沒有奏效。Twitter Bootstrap標籤：如何：增加標籤之間的間距

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; 

     }

來源

2013-06-03 Mike6679

設置margin-left和.nav-tabs > li > a, .nav-pills > li > amargin-right。 margin-right默認爲2像素。

b.e：

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

來源

2013-06-04 07:13:27

您的代碼可以工作，但是，我的代碼將每個選項卡（水平和垂直）的文本居中放在它上面。請參閱評論後的代碼：/ *將標籤中的文本居中* /。思考？ – Mike6679

你可以顯示comlete html源代碼嗎？默認情況下，居中是通過填充完成的。所以試試：'.tabbable ul li a {line-height：20px; padding-bottom：8px; padding-top：8px;}'和'.tabbable ul> li> a { padding-left：12px; padding-right：12px;' –

添加保證金右&利潤率左到.tabbable UL裏創造我所需要的空間。感謝Bass Jobsen指引我朝着正確的方向發展。

.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; 
      }

來源

2013-06-04 14:17:52 Mike6679

Twitter Bootstrap標籤：如何：增加標籤之間的間距

回答

相關問題