twitter-bootstrap Twitter Bootstrap 标签：如何：增加标签之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16906642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Tabs: How to: Increase spacing between tabs
提问by Mike6679
I'm using ui bootstrap for angular (which uses twitter bootstrap css). I was able to center the tabs, but I cannot figure out how to add spacing (margins) between the tabs (RIGHT OR LEFT). I tried adding margin-right: 100px; in .nav-tabs > li but that did not work.
我正在使用 ui bootstrap for angular（它使用 twitter bootstrap css）。我能够将选项卡居中，但我无法弄清楚如何在选项卡之间添加间距（边距）（右或左）。我尝试添加 margin-right: 100px; 在 .nav-tabs > li 中，但这不起作用。
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
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;
}
回答by Bass Jobsen
Set margin-leftand margin-rightof .nav-tabs > li > a, .nav-pills > li > a. The margin-rightis 2px by default.
设置margin-left及margin-right的.nav-tabs > li > a, .nav-pills > li > a。在margin-right默认情况下是2px的。
b.e:
是：
.nav-tabs > li > a, .nav-pills > li > a {margin-left:25px;margin-right:27px;}
回答by Mike6679
Adding margin-right & margin-left to .tabbable ul li created the margins I needed. Thanks to Bass Jobsen for pointing me in the right direction.
将 margin-right 和 margin-left 添加到 .tabbable ul li 创建了我需要的边距。感谢 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;
}
