Question

我正在尝试创建一个带有引导程序的网页，使用在线仪表板模板（Creative Tim），我有一个静态导航栏和侧边栏。侧边栏沿着页面的长度延伸。但是我想要一个固定的导航栏，但每当我尝试这样做时，导航栏和侧栏之间都会有干扰。

带静态导航栏的第一张图片如下所示：

这个位的html代码是：

<div class="wrapper">
<div class="sidebar" data-color="red" data-image="assets/img/sample.jpg">

    <div class="sidebar-wrapper">
        <div class="logo">
            <a href="" class="simple-text">
                Engineering
            </a>
        </div>
        <ul class="nav">
            <li class="active">
                <a href="dashboard.html">
                    <i class="pe-7s-graph"></i>
                    <p>Dashboard</p>
                </a>
            </li>


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

<div class="main-panel">
    <nav class="navbar navbar-default navbar-fixed">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="navbar-brand">Muhammad Tareen</p>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                tareenmj
                                <b class="caret"></b>
                          </a>
                      </li>
                    </ul>
                  </div>
            </div>
        </nav>
    </div>

我试过的第二个选项是通过更改导航栏的类来修复它，但这搞砸了格式化，它看起来像：正如您所看到的，导航栏完全干扰了其他一切。

任何解决方案都将不胜感激，谢谢！

Answer 1

如果我了解您在此处尝试做什么，则需要更新导航栏的宽度和左侧定位，而不仅仅是将其设置为固定位置。

例如，您需要获得侧边栏的宽度并设置如下内容：

.navbar-fixed {
  left: 200px; /* just an estimate of your sidebar's width */
  width: calc(100% - 200px);
}

您还需要在主面板上添加一些填充顶部，以确保固定导航系统有一些空白空间。

 .main-panel {
   padding-top: 40px;
 }

您还需要针对您网站的任何响应行为更新这些样式，但这至少应该让您朝着正确的方向前进。

这是我做的一个快速演示来说明：https://codepen.io/scottohara/pen/zwrMbW?editors=1100#

祝你好运

Answer 2

如果您在侧栏上添加了bootstrap的网格，并希望为导航栏添加相同的网格，则从导航栏中删除container类并在nav标签上应用网格类。由于导航栏是固定位置，因此它将从屏幕的左上角开始。因此，您可能希望添加其他类，例如pull-right或col-md-offset-2。

因此，这样，您只需要一个无引导程序的解决方案，而无需创建单独的类

<div class="main-panel">
    <nav class="navbar navbar-default navbar-fixed col-md-10">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <p class="navbar-brand">Muhammad Tareen</p>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">

                </ul>

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                tareenmj
                                <b class="caret"></b>
                          </a>
                      </li>
                    </ul>
            </div>
        </nav>
    </div>

Answer 3

使用！important;覆盖该类。防爆。 <div style="width:100px !important;">

这会有效..谢谢

如何更改bootstrap导航栏的宽度

3 个答案: