文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4进度条固定在顶部

问引导4进度条固定在顶部
EN

Stack Overflow用户

提问于 2018-07-04 01:10:16

回答 2查看 1.5K关注 0票数 0

我使用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>

bootstrap-4

progress-bar

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-04 10:32:27

尝试这样的方法:将进度条放在导航标签的末尾，并使其100%宽。导航标签必须得到“柔性包装:包装”，因为引导4与柔性盒工作，你必须“允许”行中断。

这里有一个非常好的柔性盒指南：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>

票数 1

Stack Overflow用户

发布于 2020-05-26 21:59:40

您可以将导航条和进度条封装在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51164573

复制

相似问题

问引导4进度条固定在顶部
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4进度条固定在顶部EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4进度条固定在顶部
EN