Css 固定引导导航栏到动态宽度DIV顶部-不是页面的全宽 我的问题

我使用的是Bootstrap 3.0，需要使用一个固定的导航条，它将停留在左侧DIV的顶部，并且不会一直延伸到窗口宽度的100%（就像我通常看到的Bootstrap示例所做的那样）。下面我有一些非常简单的代码，使用ASP.NETMVC4来解释渲染区域

我已经包括了一张图片，显示了我正在尝试做什么。目前navbar只扩展了左侧容器的75%，而不是像我希望的那样完全扩展左侧容器的100%

就像我上面所说的，我希望导航条是固定的，所以当你滚动时，它会停留在左DIV的一个位置

如有任何提示，将不胜感激！谢谢

我也看到了这个问题（），但我不想在媒体查询中动态地用固定的像素宽度维护这个导航栏。我更喜欢它填写包含它的整个左侧DIV

（）

我的代码 但这在iFrame中不起作用

---

如果有人对在iFrame中使用解决此问题有任何见解，我们将不胜感激。

您是否尝试过将导航栏和主要内容区域放在一列中，然后将右侧边栏单独放在一列中？然后添加一点CSS以校正导航栏的位置并调整响应

---

链接：

很明显，你在这个问题上花了很多精力。显示您的相关代码和问题也会非常有帮助。

.navbar{width:100%；}

不能为您解决问题吗？这应该将其宽度扩展到其父级的宽度。@ChrisHardie不幸的是，它没有。我仔细检查了所有div，以确保当我将100%放在.navbar div上时，没有任何“像素”宽度会弄乱它。我还尝试在该元素上执行

width:inherit

，希望继承列的宽度（或任何拉伸了我想要的宽度的父div）运气不好。@Itay我会试着编一把小提琴……iFrame问题可能有点奇怪，所以我不知道它是否能正确地呈现问题。但我会努力的！是的，请看我上面的示例&您将看到与此处显示的代码完全相同的代码位。这个问题也是2013年9月提出的，我不再有这个问题，因为我不再从事这个项目了。谢谢你！我不知道你为什么否决了我的答案。你有没有检查我提供的链接？正如您在提供的链接中所看到的，您是否继续从事该项目与我的解决方案确实有效并且不需要使用jQuery这一事实无关。还要记住，这些答案不仅仅是为你自己。本网站的目的是提供此类信息，以便任何其他遇到您这样问题的人都能够以最适合他们的方式解决问题。您提供的示例不起作用。我在

col-sm-7

中插入了几段文字，然后滚动，这使得两列都滚动，标题（导航栏）没有粘住。

<div class="container">
    <div class="row">
        <!--LEFT SIDE-->
        <div class="col-md-9">
            <div data-spy="affix" data-offset-top="0">
            <nav class="navbar navbar-default" role="navigation">
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form role="search" class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" placeholder="Search" class="form-control">
                        </div>
                        <button class="btn btn-default" type="submit">Submit</button>
                    </form>
                </div>
            </nav>    
            </div> <!--end data-spy=affix-->

            <!--the LeftSide below just contains basic placeholder text in a <p> tag-->
            @RenderSection("LeftSide", true)

        </div>
        <!--RIGHT SIDE-->
        <div class="col-md-3">

            <!--the RightSide below just contains basic placeholder text in a <p> tag-->
            @RenderSection("RightSide", true)

        </div>
    </div>
</div>

 $(window).resize(function () {
     var w = $("#leftSide").width();
     $("#navWrapper").css("width", w);
 });