Question

我使用的是sb管理模板，我想在顶部放置一个全角进度条，但要在“启动引导程序”和顶部菜单下方。

如何插入进度栏？

collection->each(function ($note) {...} )

Answer 1

尝试类似的方法：将进度条放在nav-Tag的末尾，使其宽度为100％。 nav-Tag必须获得“ flex-wrap：wrap”，因为bootstrap 4与flexbox一起使用，并且您必须“允许”换行。

这是一个非常好的flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

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

</nav>

Answer 2

您可以将导航栏和进度栏包装在div元素中，然后向其添加一个sticky-top类：

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

Bootstrap 4进度条固定在顶部

2 个答案: