Индикатор загрузки Bootstrap 4 зафиксирован сверху - PullRequest
Новая
       4

Индикатор загрузки Bootstrap 4 зафиксирован сверху

0 голосов
/ 04 июля 2018

Я использую шаблон администратора 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>

1 Ответ

0 голосов
/ 04 июля 2018

Попробуйте что-нибудь подобное: Поместите индикатор выполнения в конце навигационной метки и сделайте ее шириной 100%. Тэг nav должен иметь значение «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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...