粘性导航栏无法正常工作

Question

当我将粘性导航栏粘贴到顶部但我想要的是宽度不会溢出。左侧不会溢出，但右侧会溢出并固定到右侧。你能指导我吗？

以下是代码：

.navbar-default.affix {
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    position: fixed;    
    top: 0;
    width: 100%;
    z-index:15;
}

<div id="navigation">            
    <div  class="navbar navbar-default" id="navbar-default"  role="navigation">                
        <div class="navbar-header" >
            <div class="navbar-brand">
                <label>(SIP) </label>
            </div>
            <!--                <div class="navbar-img" style="">
                                <img class="icon-img" style=" width: 70px; display:none;" src="<?= base_url('assets/images/eon.png') ?>"/>
                            </div>-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav  navbar-left">
                <li class="<? if ($uri == 'home') echo "active" ?>">
                    <a href="<?php echo site_url("home") ?>"> Home</a>
                </li>
                <li class="dropdown <? if ($uri == 'aboutus') echo "active" ?>">
                    <a href="#">
                        About Us <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="<?= site_url('about_us') ?>">Overview</a></li>
                        <li><a href="<?= site_url('about_us/goal') ?>">Goal,outcome and components</a></li>
                        <li><a href="<?= site_url('about_us/approach') ?>">Approach</a></li>
                    </ul>
                </li>
                <li class="dropdown <? if ($uri == 'programs') echo "active" ?>">
                    <a href="#">
                        Programs <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="<?= site_url('') ?>">Something</a></li>
                        <li><a href="<?= site_url('') ?>">More</a></li>
                        <script>
                            $(function() {
                                $('.navbar-nav > li.dropdown').hover(function() {
                                    $(this).toggleClass('open');
                                });
                            });
                        </script>
                    </ul>
                </li>
                <li class="<? if ($uri == 'news') echo "active" ?>">
                    <a href="<?php echo site_url("news") ?>"> News</a>
                </li>
                <li class="<? if ($uri == 'contactus') echo "active" ?>">
                    <a href="<?php echo site_url("contact_us") ?>"> Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>   

Answer 1

我认为如果您要执行以下操作，您将获得所需的结果。

body{
margin:0;
}
#navigation{
position:fixed;
width:100%;
}
.navbar-default{
position:relative;
width:98%;
margin:0 auto;
}

这会为您提供固定在页面顶部的居中导航菜单。但是，如果没有看到更多的CSS，几乎不可能知道这是否是您正在寻找的解决方案。