Question

我有一个asp.net网络应用程序；我将Sitemap用于菜单控制器。然后，我决定使用引导导航栏；现在我正在尝试通过站点地图将bootstrap 4.1实施为asp.net菜单控制器。

我已经实现了从站点地图绑定asp.net菜单控制器的功能；并使用bootstrap 4.1对其进行样式设置；但是在每个菜单项字母之前都有点。而且我无法删除它们（请看图片）。

我需要帮助来从菜单中删除这些点。预先感谢您的帮助。

这是我的代码：

<!-- Menu BAŞI -->
<nav class="afiniteksMenuNavbar navbar navbar-expand-md navbar-light">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" EnableViewState="false" />
   <div class="NBCollapse collapse navbar-collapse" id="navbarSupportedContent">
      <asp:Menu ID="Menu1" runat="server" Orientation="horizontal"
         DataSourceID="SiteMapDataSource1"
         IncludeStyleBlock="False"
         CssClass="afiniteksNav navbar-nav" StaticMenuStyle-CssClass="nav-item"
         StaticSelectedStyle-CssClass="nav-item" StaticSubMenuIndent="16px"
         DynamicMenuStyle-CssClass="nav-item dropdown-menu"
         RenderingMode="List" role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
         <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="dropdown-item" HorizontalPadding="15px" Height="50px" VerticalPadding="15px" />
         </LevelMenuItemStyles>
         <LevelSelectedStyles>
            <asp:MenuItemStyle CssClass="nav-item active" Font-Underline="False" />
         </LevelSelectedStyles>
         <StaticHoverStyle Font-Underline="true" />
         <StaticSelectedStyle Font-Bold="true" />
         <DynamicMenuItemStyle CssClass="dropdown-item" />
      </asp:Menu>
   </div>
</nav>
<!-- Menu SONU -->
</div>

以下是已编译的html代码：

 <div class="col-md-8" style="border-bottom: 1px solid #000;">
                        <!-- Menu BAŞI -->

                        <div class="ortalaVH">
                        <nav class="afiniteksMenuNavbar navbar navbar-expand-md navbar-light">

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

                            <div class="NBCollapse collapse navbar-collapse" id="navbarSupportedContent">
                                <a href="#Menu1_SkipLink"><img alt="Gezinti Bağlantılarını Atla" src="/afiniteks.com/WebApp/WebResource.axd?d=Nd69XRQ7kJaHjjr-OjgVxjrB03FYSGQ7QiO79mNpEUi5Set0fmG4nYg5ZIDyqae_peFkIA3_jV-FbQB4KaDCfPTVsUgbnhfE1Z15KY2vxEo1&amp;t=636590973156695494" width="0" height="0" style="border-width:0px;"></a><div role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="afiniteksNav navbar-nav" id="Menu1" style="float: left;">
    <ul class="level1 nav-item static" tabindex="0" role="menubar" style="position: relative; width: auto; float: left;">
        <li role="menuitem" class="static" style="position: relative; float: left;"><a title="AnaSayfa" class="level1 dropdown-item static" href="/afiniteks.com/WebApp/" tabindex="-1">AnaSayfa</a></li><li class="has-popup static" aria-haspopup="Menu1:submenu:3" role="menuitem" style="position: relative; float: left;"><a title="Tanımlamalar Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Tanımlar</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:3" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a title="Tanımlamalar Bölümü" class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/AnaPanel/SabitTanimlama.aspx" tabindex="-1">Sabit Tanımlama</a></li><li class="has-popup dynamic" aria-haspopup="Menu1:submenu:5" role="menuitem" style="position: relative;"><a title="Cari Bölümü" class="popout level2 dropdown-item dynamic" tabindex="-1">Cari</a><ul class="level3 nav-item dropdown-menu dynamic" id="Menu1:submenu:5" style="display: none; position: absolute; top: 0px; left: 100%;">
                <li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Cari/CariTanimlama.aspx" tabindex="-1">Tanımlama</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Cari/CariGuncelleme.aspx" tabindex="-1">Güncelleme</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Cari/CariListesi.aspx" tabindex="-1">Cari listesi</a></li>
            </ul></li><li class="has-popup dynamic" aria-haspopup="Menu1:submenu:10" role="menuitem" style="position: relative;"><a title="Stok Kartları Bölümü" class="popout level2 dropdown-item dynamic" tabindex="-1">Ürün / Hizmet</a><ul class="level3 nav-item dropdown-menu dynamic" id="Menu1:submenu:10" style="display: none; position: absolute; top: 0px; left: 100%;">
                <li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/StokKarti/UrunTanimlama.aspx" tabindex="-1">Tanımlama</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/StokKarti/UrunGuncelleme.aspx" tabindex="-1">Güncelleme</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/StokKarti/UrunListesi.aspx" tabindex="-1">Liste</a></li>
            </ul></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:16" role="menuitem" style="position: relative; float: left;"><a title="Pazarlama Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Pazarlama</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:16" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Pazarlama/SiparisIslemleri.aspx" tabindex="-1">Sipariş İşlemleri</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Pazarlama/SiparisRaporu.aspx" tabindex="-1">Sipariş Raporları</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Pazarlama/IsletmeHareket.aspx" tabindex="-1">İşletme Hareket - Tümü</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item selected dynamic" href="/afiniteks.com/WebApp/Pazarlama/SiparisAnaliz.aspx" tabindex="-1">Sipariş Analiz - Tümü</a></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:22" role="menuitem" style="position: relative; float: left;"><a title="Satın Alma Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Satın Alma</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:22" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/SatinAlma/SA_SiparisGiris.aspx" tabindex="-1">SA - Sipariş İşlemleri</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/SatinAlma/SA_SiparisRaporu.aspx" tabindex="-1">SA - Sipariş Raporları [TR]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/SatinAlma/SA_SiparisRaporu_EN.aspx" tabindex="-1">SA - Sipariş Raporları [EN]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/SatinAlma/SA_SiparisListesi.aspx" tabindex="-1">SA - Sipariş Listesi</a></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:28" role="menuitem" style="position: relative; float: left;"><a title="Depo Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Depo</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:28" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/DepoCikis.aspx" tabindex="-1">Depo Çıkış</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/DepoCikisAnaliz.aspx" tabindex="-1">Depo Çıkış Analiz</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/DepoCikisFisi.aspx" tabindex="-1">Depo Çıkış Fişi</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/EtiketYazdir.aspx" tabindex="-1">Etiket Yazdır</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/LotEtiketiYazdir.aspx" tabindex="-1">Lot Etiketi Yazdır</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/DepoGiris.aspx" tabindex="-1">Depo Giriş</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/LotIslemleri.aspx" tabindex="-1">Lot İşlemleri</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/StokDurumListesi.aspx" tabindex="-1">Stok Durumu</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/LotStokDurum.aspx" tabindex="-1">Lotlu Stok Durumu</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/LotluStokListeleme.aspx" tabindex="-1">Lotlu Stok Listeleme</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Depo/DepoLokasyon.aspx" tabindex="-1">Lokasyon</a></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:41" role="menuitem" style="position: relative; float: left;"><a title="Evrak Düzenleme Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Evrak Düzenleme</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:41" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/ProformaTR.aspx" tabindex="-1">Proforma [TR]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/ProformaEN.aspx" tabindex="-1">Proforma [EN]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/IrsaliyeliFaturaTR.aspx" tabindex="-1">Fatura [TR]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/CekiListesi.aspx" tabindex="-1">Çeki Listesi [TR]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/IrsaliyeliFaturaEN.aspx" tabindex="-1">Fatura [EN]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/PackingListEN.aspx" tabindex="-1">Packing List [EN]</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/CariEkstre.aspx" tabindex="-1">Cari Ekstre</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Evrak/CariEkstrePDF.aspx" tabindex="-1">Cari Ekstre PDF</a></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:51" role="menuitem" style="position: relative; float: left;"><a title="Muhasebe Bölümü" class="popout level1 dropdown-item static" tabindex="-1">Muhasebe</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:51" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li class="has-popup dynamic" aria-haspopup="Menu1:submenu:52" role="menuitem" style="position: relative;"><a title="KASA" class="popout level2 dropdown-item dynamic" tabindex="-1">Kasa</a><ul class="level3 nav-item dropdown-menu dynamic" id="Menu1:submenu:52" style="display: none; position: absolute; top: 0px; left: 100%;">
                <li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Kasa/TahsilatFisi.aspx" tabindex="-1">Tahsilat Fişi</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Kasa/OdemeFisi.aspx" tabindex="-1">Ödeme Fişi</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/Kasa/GiderFisi.aspx" tabindex="-1">Gider Fişi</a></li>
            </ul></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Muhasebe/IrsFatListesi.aspx" tabindex="-1">Satış Faturaları Listesi</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a title="Giderler Listesi" class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Muhasebe/GiderListesi.aspx" tabindex="-1">Giderler Listesi</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a title="Mutabakat Formları" class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/Muhasebe/BaBs.aspx" tabindex="-1">BA-BS Formu</a></li>
        </ul></li><li class="has-popup static" aria-haspopup="Menu1:submenu:61" role="menuitem" style="position: relative; float: left;"><a title="Yönetim Bölümü" class="popout level1 dropdown-item static" href="/afiniteks.com/WebApp/yonet" tabindex="-1">Yönetim</a><ul class="level2 nav-item dropdown-menu dynamic" id="Menu1:submenu:61" style="display: none; position: absolute; top: 100%; left: 0px;">
            <li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/yonet/OrtaklarHesabi.aspx" tabindex="-1">Ortaklar Hesabı</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 dropdown-item dynamic" href="/afiniteks.com/WebApp/yonet/ortaklarHH.aspx" tabindex="-1">Ortaklar HH</a></li><li class="has-popup dynamic" aria-haspopup="Menu1:submenu:64" role="menuitem" style="position: relative;"><a title="Goba" class="popout level2 dropdown-item dynamic" tabindex="-1">GOBA</a><ul class="level3 nav-item dropdown-menu dynamic" id="Menu1:submenu:64" style="display: none; position: absolute; top: 0px; left: 100%;">
                <li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/goba/access/users.aspx" tabindex="-1">Settings</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level3 dropdown-item dynamic" href="/afiniteks.com/WebApp/client" tabindex="-1">Client Zone</a></li>
            </ul></li>
        </ul></li>
    </ul>
</div><div style="clear: left;"></div><a id="Menu1_SkipLink"></a>
                            </div>
                        </nav>
                        </div>


                        <!-- Menu SONU -->
                    </div>

Answer 1

ASP.NET菜单系统很丑。

这是BS4文档中的html块：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    ...

与结合BS4的ASP.NET比较：

<div class="NBCollapse navbar-collapse " id="navbarSupportedContent">
  <a href="#Menu1_SkipLink"><img alt="Gezinti Bağlantılarını Atla" src="" width="0" height="0" style="border-width:0px;"></a>
  <div role="menu" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" class="afiniteksNav navbar-nav" id="Menu1" style="float: left;">
    <ul class="level1 nav-item static" tabindex="0" role="menubar" style="position: relative; width: auto; float: left;">
      <li role="menuitem" class="static" style="position: relative; float: left;">
        <a title="AnaSayfa" class="level1 dropdown-item static" href="/afiniteks.com/WebApp/" tabindex="-1">AnaSayfa</a>
      </li>
      ...

从头开始，所有BS4类都会出现在意外的地方。例如，使用应该被归类为<ul>而不是.navbar-nav

的nav-item标签

Bootstrap 4 .navbar-nav类包含以下样式：

.navbar-nav {
  ...
  list-style: none;
}

这直接是由于ASP如何呈现其菜单系统。

您也许可以创建自己的CSS来为菜单系统设置list-style: none;，但如果那样简单，我会感到惊讶。

除了样式冲突外，ASP菜单也有自己的JS，您可能还会遇到JS冲突

Answer 2

我通过更改以下代码解决了我的问题：

IncludeStyleBlock="False"

收件人：

IncludeStyleBlock="true"

非常感谢你们所有人尝试回答我的问题。

使用asp.net web.sitemap引导4导航栏；如何修复点？

2 个答案: