css 如何更改 Bootstrap 导航栏的宽度

ndh0cuux 于 2023-04-13 发布在 Bootstrap

关注(0)|答案(3)|浏览(256)

我试图创建一个网页，与 Bootstrap ，使用一个模板的 Jmeter 板在线（创意蒂姆），在那里我有一个静态导航栏和侧边栏.侧边栏延伸所有沿着页面的长度.然而，我想一个固定的导航栏，但每当我试图这样做，有导航栏和侧边栏之间的干扰.
带有静态导航栏的第一个图像如下所示：

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

我尝试的第二个选项是通过更改导航栏的类来修复它，但这打乱了格式，看起来像：

正如你所看到的，导航栏完全干扰了其他所有内容。
任何解决方案将不胜感激，谢谢！

css

来源：https://stackoverflow.com/questions/43503776/how-to-change-the-width-of-bootstrap-nav-bar

3条答案

按热度按时间

enxuqcxy1#

如果我理解你在这里试图做什么，你需要更新导航栏的宽度和左侧位置，而不仅仅是将其设置为位置固定。
例如，您需要获取侧边栏的宽度并设置如下内容：

.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#
祝你好运

赞(0）回复(0）举报 2023-04-13

s2j5cfk02#

如果你已经在侧边栏添加了bootstrap的网格，并且想在导航栏添加同样的网格，那么从导航栏中删除container类，并在导航标签上应用网格类。由于导航栏是固定位置的，它将从屏幕的左上角开始。所以你可能想添加其他类，如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>

赞(0）回复(0）举报 2023-04-13

6tr1vspr3#

使用!important;重写该类。
示例：<div style="width:100px !important;">

赞(0）回复(0）举报 2023-04-13