如何增加nav-pills bootstrap之间的空间？

Question

我的导航丸是关闭的，我希望它们分散，我还可以改变字体和字体大小吗？

 <div id = "page">
       <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>

   <div>

Answer 1

你可以像这样自定义每个li之间的差距：

.nav-pills>li+li {
  margin-left: 10px; // 2px by default
} 

Answer 2

只需创建新的CSS文件并将其链接到HTML中即可。然后在其中编写此代码：

.nav-pills li {
    margin-left: 5px; //use whatever you want
} 

.nav-pills a {
    //use font-family and font-size to change font and size of it.
} 

记得在bootstrap之后链接这个新的css文件，所以它会覆盖它。

Answer 3

这样做，只是替换？用您选择的号码。

.nav-pills > li > a { margin-left:??px;margin-right:??px; }