引导导航栏折叠中居中的站点地图菜单。 随着屏幕尺寸的变化删除空白

Question

在移动设备上查看时，无法居中放置引导程序随附的站点地图菜单的位置/位置时出现问题。

在PC上查看时，站点地图菜单恰好位于页面顶部的适当位置，文本对齐和对齐内容就位，并完成各自的工作。 但是，当我最小化并开始拖动屏幕的一侧以模拟移动设备时，在某个断点（768px）处，切换按钮取代了导航栏菜单。 到现在为止还挺好。

这是问题开始的地方。 一旦我单击切换按钮以展开折叠菜单，该菜单就位于屏幕左侧约20-30px的位置，直到菜单最终居中时将屏幕向下拖动到其绝对最小宽度，该菜单才会居中。 位置：相对，绝对，左，右，中心，顶部，底部或任何其他组合似乎都被完全忽略了。 它只是拒绝居中
在智能手机上查看时，切换按钮会立即显示，但单击时，如上所述，生成的扩展菜单也会像在PC上一样向左拉。

我尝试使用

•职位

•向右拉

•导航栏右

•内容一致

•文字对齐

•文字中心

用

•bootstrap.css / @media（最小宽度：768px）

•bootstrap.min.css

•Site.css

大量的本地和内联css编码，但都无济于事。 在过去四天中，我必须搜索过所有有关引导程序navbar-collapse的帖子，甚至那些声称同时使用站点地图和引导程序的帖子都在其中包含<ul> ， <li>和'dropdowns / sub-menus'他们的代码，在这里都没有关系。

当然，必须有一种方法可以在引导程序中使用站点地图菜单并对齐结果菜单，而不会在扩展后将所有空白留在一侧，否则Visual Studio为什么会接受两者？

在引导程序导航栏折叠菜单中使用站点地图的任何帮助将不胜感激。 我不希望像我之前所说的那样更改站点地图菜单的自然状态，但是一旦它被扩展，就更改它的显示，无论我尝试什么，我要么在崩溃之前，崩溃之前和之后对站点地图进行更改，或根本没有任何变化。

我正在使用默认的bootstrap.css和bootstrap.min.css，它们是使用Microsoft Visual Studio 2015企业版创建.net Web窗体项目所附带的

这是我的站点地图和引导程序。 如果需要任何其他代码，请询问，我会提供。

的HTML

<nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-right" id="myNavbar">

            <asp:Menu ID="NavBar" runat="server" CssClass="nav" DataSourceID="SiteMapDataSource1" StaticEnableDefaultPopOutImage="False" Orientation="Horizontal">
            </asp:Menu>

            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        </div>
    </div>
</nav>

CSS（本地）

.navbar-collapse .navbar-right {
        height: auto;
        align-content: center;
        text-align: center;
        font-size: 1.4em;            
    }

最小化的屏幕平板电脑
屏幕移动最小化

Answer 1

老实说，尽管我非常确定它与CSS有关，但是我在任何地方都找不到答案，因此我只是坚持约定，完全放弃了sitemap / bootstrap选项。 这是我所做的，并且可以根据需要运行。 但是，如果将来有人偶然发现此问题，并且有解决方案，我希望收到您的来信。

<div class="myNav">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
           <div class="navbar-header">
               <button type="button" class="navbar-toggle" data toggle="collapse" data-target="#myNavbar">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>
           </div>
           <div class="collapse navbar-collapse navbar-right" id="myNavbar">
               <ul class="nav navbar-nav">
                   <li><a href="Default.aspx">Home</a></li>
                   <li><a href="about.aspx">About</a></li>
                   <li><a href="SwordPlay.aspx">Sword-Play</a></li>
                   <li><a href="Meditation.aspx">Meditation</a></li>
                   <li><a href="TeamBuilding.aspx">Team Building</a></li>
                   <li><a href="SchoolSessions.aspx">School Sessions</a></li>
                   <li><a href="CoreBalance.aspx">Core & Balance Work</a></li>                                     
                   <li><a href="HollisticCounselling.aspx">Hollistic Counselling</a></li>
                   <li><a href="ImagesVideos.aspx">In Action</a></li>
                   <li><a href="Contact.aspx">Contact</a></li>
               </ul>

               <%--<asp:Menu ID="NavBar" runat="server" CssClass="nav" DataSourceID="SiteMapDataSource1"
                                        StaticEnableDefaultPopOutImage="False" Orientation="Horizontal">
               </asp:Menu>

               <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />--%>               
           </div>
       </div>
   </nav>