【问题标题】:how to increase space between nav-pills bootsrap?如何增加导航药丸引导程序之间的空间?
【发布时间】:2014-11-08 21:15:59
【问题描述】:

我的导航药丸要关闭,我希望它们散开,有什么方法可以更改字体和字体大小?

 <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>

【问题讨论】:

  • 这会起作用:.nav-pills > li > a {margin-left:??px;margin-right:??px;}
  • 效果很好,谢谢!

标签: html css twitter-bootstrap web navbar


【解决方案1】:

您可以像这样自定义每个 li 之间的边距:

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

【讨论】:

    【解决方案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.
    } 
    

    只记得在引导后链接这个新的 css 文件,这样它就会覆盖它。

    【讨论】:

      【解决方案3】:

      这样就可以了,只需替换 ??与您选择的号码。

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

      【讨论】: