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标签：如何：增加标签之间的间距

回答

相关问题