在Bootstrap 3中整齐地排列居中的多个nav-tabs

Question

我想知道，如果有很多方法可以整齐地安排bootstrap 3.3.7中的nav-tabs。底部的边框移位，活动标签看起来不太好。

这是标记：

<div class="row">
<div class="col-md-12">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li><a href="javascript:void()" data-toggle="tab">Lorem Ipsum</a></li>
<li><a href="javascript:void()">Lorem Ipsum</a></li>
<li><a href="javascript:void()">Lorem Ipsum</a></li>
<li class="active"><a href="javascript:void()">Lorem Ipsum</a></li>
<li><a href="javascript:void()">Lorem Ipsum</a></li>
<li><a href="javascript:void()">Lorem Ipsum</a></li>
<li><a href="javascript:void()">Lorem Ipsum</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active">
</div>
</div>
</div>
</div>

样式：

.nav-tabs {
border-bottom: 1px solid #dddddd;
background: linear-gradient(#fff 50%, #fbfbfb 95%, #f3f3f3);
text-align: center;
}
.nav-tabs > li {
float:none;
display:inline-block;
margin-bottom: -1px;
}

.nav-tabs > li > a {
margin-right: 0;
margin-bottom: -1px;
line-height: 1.42857143;
padding: 6px 12px;
background: linear-gradient(#f2f4fc, #e1e5f4 95%, #e1e5f4);
border: 1px solid #ced5f1;
border-right-color: #bcc4e2;
border-bottom: none;
box-shadow: #fff 3px 1px 12px -4px inset;
border-radius: 8px 8px 0 0;
color: #000;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
background: #ffffff;
cursor: default;
}

.nav-tabs > li.active {
border-bottom: transparent 1px solid;
}