相关疑难解决方法(0)

我不了解Twitter Bootstrap如何为导航执行活动链接.如果我有这样的常规导航(在轨道连接上使用ruby):

<ul class="nav">
  <li class="active"> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>
  <li class=""> <a href="/link">Link</a> </li>        
</ul>

如何根据点击的链接保持活动状态？

我想知道是否可以在 Bootstraps 导航栏中的项目之间添加间距以将它们分散一点？具体来说，如果我可以将所有导航项左右间隔至少 25 像素。

.navbar-nav我尝试在类中添加左右边距.navbar-nav > a，但它似乎没有改变任何东西。

先感谢您！

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-
    target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-
    expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">Disabled</a>
        </div>
    </div>
</nav>

我正在使用Flask/Jinja2和Bootstrap 3.

我想添加class="active"到当前的导航元素.

这些元素存储在prog_ids:

/programme/23022014
/programme/24022014
/programme/25022014

我跟着像这样的一些例子,我的HTML代码是:

    <ul class="nav nav-pills ">
    {% for prog_id in prog_ids %}
    {% macro nav_link(endpoint, prog_id) %}
        {% if request.endpoint.endswith(endpoint) %}
        <li class="active">
            <a href="{{ url_for(endpoint) }}">
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
            </a>
        </li>
    {% else %}
        <li>
            <a href="{{ url_for(endpoint) }}">
            <span class="badge pull-right">-</span>
            {{prog_id|strftime_b}}
            </a>
        </li>
    {% endif %}
    {% endmacro %}
    {% endfor %}
    </ul>

上面的代码有错误吗？因为,它什么都没有显示.