【问题标题】:Bootstrap: Spacing in a navbar under djangoBootstrap:django下导航栏中的间距
【发布时间】:2013-02-16 05:32:55
【问题描述】:

我正在尝试在 Bootstrap 中做一个导航栏:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
                <ul class="nav">
                    <li class="navbar-text">
                        {{ object }}
                    </li>
                    <li></li>
                    <li class="navbar-text">
                        {{ object2 }}
                    </li>
                    <li></li>
                    <li class="navbar-text">
                        {{ object3 }}
                    </li>
                    <li></li>
                    <li class="navbar-text">
                        {{ object4 }}
                    </li>
                </ul>
    </div>
</div>

但是当它渲染时,它会将导航栏中的所有对象相互推挤。如何强制它们之间的间距?

【问题讨论】:

  • 是否可以为.navbar-text 元素添加填充?
  • 你能把你正在做的测试页面显示出来吗,我们会更容易帮助到你
  • 一般情况下,引导导航栏已准备就绪,如果它不能正确呈现,那么还有一些其他样式会影响它
  • 谢谢,EP!那成功了。知道如何创建缩进来移动对象吗?

标签: html django twitter-bootstrap navbar


【解决方案1】:
.navbar .nav > li > a {
color: #777777;
float: none;
padding: 10px 15px;/* this the one which enforces space between each link*/
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}

请检查我给你的上述代码..引导 css 必须让这些行检查它们以查看它们是否被更改。

或者您可以创建一个新的样式表,在所有引导 css 文件之后包含它,并覆盖任何其他影响相同的 css 规则。

关于缩进

    .navbar .nav > li > a:hover
     {
    text-indent:100px;
    }

【讨论】:

  • 谢谢夏尔!你对我的缩进问题有什么意见吗?
  • 如果你能给我看一个测试页,我肯定能帮上忙,更准确地说。
  • 所有相关信息都应该在里面。其余的只是一个插入的 HTML 页面。我只想知道如何缩进,一般来说。
  • text-indent 是一个可用于缩进的属性。在上面添加了一个示例..检查
  • 感谢 Shail,成功了!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-05
  • 1970-01-01
  • 1970-01-01
  • 2015-12-04
相关资源
最近更新 更多