Question

我想让bootstrap导航栏更小并保持正确但这里的小问题我有一些数据动态加载在网格的右侧与导航栏重叠，所以我想保持导航栏偏移右边3列，所以我添加css类container-panel使宽度变小并保持它向右我有边距左边。但是在不同的像素上它会断开，导航栏在其他元素上重叠。引导程序中是否有任何修复来完成此任务？

main.html

<div class="col-md-10">
    <nav class="navbar navbar-default container-panel">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="z-index:10;">
                <ul class="nav navbar-nav pull-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-file"></span><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span ng-click="createXml()">Create new BPMN Diagram</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-folder-open"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

main.css

.navbar.container-panel {
  width:554px;
  margin-left: 760px;
}

Answer 1

使用可变宽度（如vw或％）来调整相对于屏幕宽度的宽度。您可能需要在较小的断点处调整vw或％，以免切断导航栏内容。

.navbar.container-panel {
  width:60vw;
  margin-left: 760px;
}

或

.navbar.container-panel {
  width:60%;
  margin-left: 760px;
}

如何使bootstrap导航栏的宽度变小？

1 个答案: