如何修复此SiteMapPath以使用Twitter Bootstrap BreadCrumb的风格正常工作？

Question

我是一名新的ASP.NET开发人员和Twitter Bootstrap的新用户。我在Stackoverflow上followed this post here在我的ASP.NET应用程序中有一个痕迹。我已经开发了它但是我的面包屑样式有一个小问题，顶部菜单栏如下面的快照所示：

顶部菜单栏和正文之间没有空格。但是，它应该是这样的：

那么如何添加空间以使其看起来像第二个快照中的原始空间？

Twitter Bootstrap BreadCrumb的原始css风格如下：

<style>
        .breadcrumb
        {
            padding: 8px 15px;
            margin-bottom: 20px;
            list-style: none;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

            .breadcrumb > li
            {
                display: inline-block;
            }

                .breadcrumb > li + li:before
                {
                    padding: 0 5px;
                    color: #cccccc;
                    content: "/\00a0";
                }

            .breadcrumb > .active
            {
                color: #999999;
            }
    </style>

HTML标记如下：

<ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
    </ol>

对于SiteMapPath，我是按照上面提到的帖子中提到的那样做的：

<div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <!-- Everything you want hidden at 940px or less, place within here -->
                        <div class="nav-collapse collapse">
                            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" EnableViewState="false"
                                IncludeStyleBlock="false" Orientation="Horizontal"
                                CssClass="navbar"
                                StaticMenuStyle-CssClass="nav"
                                StaticSelectedStyle-CssClass="active"
                                DynamicMenuStyle-CssClass="dropdown-menu">
                            </asp:Menu>
                        </div>
                    </div>
                </div>
            </div>

            <asp:SiteMapPath
                ID="SiteMap1"
                runat="server"
                PathSeparator=" / "
                ParentLevelsDisplayed="1"
                PathDirection="RootToCurrent"
                RenderCurrentNodeAsLink="false"
                ShowToolTips="true"
                CssClass="breadcrumb">
                <NodeTemplate>
                    <li>
                        <asp:HyperLink
                            ID="lnkPage"
                            Text='<%# Eval("Title") %>'
                            NavigateUrl='<%# Eval("Url") %>'
                            ToolTip='<%# Eval("Description") %>'
                            runat="server" />
                    </li>
                </NodeTemplate>
            </asp:SiteMapPath>

更新

这是实际的HTML输出：

<div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                        <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <!-- Everything you want hidden at 940px or less, place within here -->
                        <div class="nav-collapse collapse">
                            <a href="#Menu1_SkipLink" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip Navigation Links</a>
                            <div class="navbar" id="Div1">
                                <ul class="level1 nav">
                                    <li><a title="About Page" class="level1" href="/About.aspx">About</a></li>
                                    <li><a title="services listing page" class="popout level1 selected" href="/Services.aspx">Services</a><ul class="level2 dropdown-menu">
                                        <li><a class="level2" href="/Services/Service1.aspx">Service1</a></li>
                                        <li><a class="level2" href="/Services/Service2.aspx">Service2</a></li>
                                        <li><a class="level2" href="/Services/Service3.aspx">Service3</a></li>
                                        <li><a class="level2" href="/Services/Service4.aspx">Service4</a></li>
                                    </ul>
                                    </li>
                                    <li><a title="Test Page" class="level1" href="/TestPage.aspx">Test</a></li>
                                    <li><a title="Contact Us Page" class="level1" href="/ContactUs.aspx">Contact Us</a></li>
                                </ul>
                            </div>
                            <a id="Menu1_SkipLink"></a>
                        </div>
                    </div>
                </div>
            </div>

            <span id="Span1" class="breadcrumb"><a href="#SiteMap1_SkipLink" style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;">Skip Navigation Links</a><span>
                <li>
                    <a id="SiteMap1_lnkPage_0" title="Home Page" href="/Default.aspx">Home</a>
                </li>
            </span><span>/ </span><span>
                <li>
                    <a id="SiteMap1_lnkPage_1" title="services listing page" href="/Services.aspx">Services</a>
                </li>
            </span><a id="SiteMap1_SkipLink"></a></span>