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

Question

I have an issue with not being able to centre the display/position of the bootstrap enclosed sitemap menu when viewed on a mobile device.

Viewed on a PC the sitemap menu sits perfectly across the top of the page where it should, text-align and align-content in place and doing their respective jobs. However, at a certain breakpoint (768px) as I minimise and start dragging one edge of the screen to emulate a mobile device the toggle button replaces the navbar menu. So far so good.

Here is where the problem begins. Once I click on the toggle button to expand the collapsed menu, the menu sits about 20-30px in from the left side of the screen and will not centre until the screen is dragged down to its absolute minimum width when the menu is finally centred. Position: relative, absolute, left, right, centre, top, bottom, or any other combination seem to be ignored totally. It simply refuses to centre itself
Viewed on a smartphone the toggle button appears immediately as it should, but when clicked the resulting expanded menu also pulls left as it does on the PC as mentioned above.

I have tried using

• Position

• Pull-right

• Navbar-right

• Align-content

• Text-align

• Text-centre

With

• bootstrap.css / @media (min-width: 768px)

• bootstrap.min.css

• Site.css

And a fair amount of local and inline css coding, but it has all been to no avail. During the past four days I must have searched all the posts on here that deal with bootstrap navbar-collapse and even those which claim to utilise both sitemaps and bootstrap have <ul> , <li> , and 'dropdowns/sub-menus' in their code, none of which are relevant here.

Surely there must be a way to use a sitemap menu inside bootstrap and align the resulting menu without leaving all that white space to one side once it has been expanded, or why else would Visual Studio accept both?

Any help using a sitemap inside bootstrap navbar-collapse menu would be appreciated. I do not wish to alter the sitemap menu in its natural state as I said earlier, but alter the display of it once it has been expanded and no matter what I try I either get changes in the sitemap before collapse, before and after collapse, or no changes at all.

I am using the default bootstrap.css and bootstrap.min.css which comes with creating a .net web forms project using Microsoft Visual Studio 2015 enterprise

Here is my sitemap and bootstrap. If there is any further code required, please ask and I will provide.

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 (local)

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

Minimised Screen tablet
Minimised Screen Mobile

Answer 1

To be honest I cannot find an answer anywhere although I am pretty sure it has to do with CSS so I have just stuck with convention and forgone the sitemap/bootstrap option altogether. Here is what I have done, and it works as needed. If anyone happens to stumble across this question in the future however and has a solution I would love to hear from you.

<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>