Bootstrap 4 引导4进度条固定在顶部_Bootstrap 4_Progress Bar

Bootstrap 4 引导4进度条固定在顶部

bootstrap-4

Bootstrap 4 引导4进度条固定在顶部,bootstrap-4,progress-bar,Bootstrap 4,Progress Bar,我正在使用sb管理模板，我想在顶部放置一个全宽进度条，但在“开始引导”和顶部菜单下方如何插入进度条 <body class="fixed-nav sticky-footer bg-dark" id="page-top">  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <a class=

我正在使用sb管理模板，我想在顶部放置一个全宽进度条，但在“开始引导”和顶部菜单下方

如何插入进度条

<body class="fixed-nav sticky-footer bg-dark" id="page-top">
  <!-- Navigation-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
          <a class="nav-link" href="index.html">
            <i class="fa fa-fw fa-dashboard"></i>
            <span class="nav-link-text">Dashboard</span>
          </a>
        </li>

      </ul>
      <ul class="navbar-nav sidenav-toggler">
       ...
      </ul>
      <ul class="navbar-nav ml-auto">
        ...
      </ul>
    </div>
  </nav>







...


...

试试这样的方法：将进度条放在导航标签的末端，并使其100%宽度。导航标签必须得到“flex-wrap:wrap”，因为引导程序4与flexbox一起工作，并且您必须“允许”换行

下面是一个非常好的flexbox指南：







...


...

您可以将导航栏和进度栏包装在div元素中，然后向其中添加一个粘性顶级：

<div class="sticky-top">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav" style="flex-wrap: wrap;">
    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
          <a class="nav-link" href="index.html">
            <i class="fa fa-fw fa-dashboard"></i>
            <span class="nav-link-text">Dashboard</span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav sidenav-toggler">
        ...
      </ul>
      <ul class="navbar-nav ml-auto">
       ...
      </ul>
    </div> 
  </nav>

  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

</div>







...


...

<div class="sticky-top">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav" style="flex-wrap: wrap;">
    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
          <a class="nav-link" href="index.html">
            <i class="fa fa-fw fa-dashboard"></i>
            <span class="nav-link-text">Dashboard</span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav sidenav-toggler">
        ...
      </ul>
      <ul class="navbar-nav ml-auto">
       ...
      </ul>
    </div> 
  </nav>

  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

</div>