如果Bootstrap 4.5中的空间较少，则使用新的导航栏 [英] New navbar if less space in Bootstrap 4.5

问题描述

代码(使用Bootstrap 4.5):

Code (Using Bootstrap 4.5):

$(".self-first-ul").append('<li class="nav-item">A long sentence here, which does not fit on small screens.</li>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="http://localhost/project/">Name</a>

  <ul class="navbar-nav self-first-ul">
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href=""><img src="" alt="" title="" width="30" height="30" loading="lazy" />&nbsp;
          <span>1</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

我的代码如何显示:-

当屏幕很大时:-

当屏幕较小时:-

屏幕较小时的显示方式:-

我尝试在第一个导航栏之后添加额外的导航栏，但是当屏幕很大时，效果并不理想.并且，将小屏幕上的第一个导航栏重叠.

I tried to add extra navbar after the first navbar, but then it was not looking good when screen was big. And also, overlapping the first navbar in the small screen.

推荐答案

我已经更新了jquery代码以执行您想要的任务.请运行并查看代码片段以获取详细信息.

I have updated the jquery code to perform the task you desire. Please run and see the code snippet for details.

$(document).ready(function() {
  $(".self-first-ul").append('<li class="nav-item">A long sentence here, which does not fit on small screens.</li>');

  function updateFlexConfiguration(x) {
    if (x.matches) { // If media query matches
      $("nav").css("display", "flex");
      $("a").css("order", 0);
      $("button").css("order", 1);
      $("ul").css("order", 2);
    } else {
      $("nav.navbar").css("display", "flex");
      $("a").css("order", 0);
      $("ul").css("order", 1);
      $("button").css("order", 2);
      $("div").css("order", 2);
    }
  }
  const navBarPadding = 32;
  var navItemsWidth = $("a").outerWidth(true) + $("button").outerWidth(true) + $(".self-first-ul").outerWidth(true) + navBarPadding;
  var x = window.matchMedia("(max-width: " + navItemsWidth + "px)");
  updateFlexConfiguration(x); // Call listener function at run time
  x.addListener(updateFlexConfiguration); // Attach listener function on state changes

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="http://localhost/project/">Name</a>

  <ul class="navbar-nav self-first-ul">
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href=""><img src="" alt="" title="" width="30" height="30" loading="lazy" />&nbsp;
          <span>1</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

更新:将长文本居中

$(document).ready(function() {
  // Add text center to align the text
  $(".self-first-ul").append('<li class="nav-item text-center">A long sentence here, which does not fit on small screens.</li>');

  function updateFlexConfiguration(x) {
    if (x.matches) { // If media query matches
      $("nav").css("display", "flex");
      $("a").css("order", 0);
      $("button").css("order", 1);
      $("ul").css("order", 2);
      $("ul").css("flex-grow", 1); // to take up remaining space so that text can be centered
    } else {
      $("nav.navbar").css("display", "flex");
      $("nav.navbar").css("justify-content", "space-between"); // Set space between the flex-items
      $("a").css("order", 0);
      $("ul").css("order", 1);
      $("ul").css("flex-grow", 0); // Set ul not grow with the remaining space
      $("button").css("order", 2);
      $("div").css("order", 2);
      $("div").css("flex-grow", 0); // Set div not grow with the remaining space
    }
  }
  const navBarPadding = 32;
  var navItemsWidth = $("a").outerWidth(true) + $("button").outerWidth(true) + $(".self-first-ul").outerWidth(true) + navBarPadding;
  var x = window.matchMedia("(max-width: " + navItemsWidth + "px)");
  updateFlexConfiguration(x); // Call listener function at run time
  x.addListener(updateFlexConfiguration); // Attach listener function on state changes

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="http://localhost/project/">Name</a>

  <ul class="navbar-nav self-first-ul">
  </ul>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href=""><img src="" alt="" title="" width="30" height="30" loading="lazy" />&nbsp;
          <span>1</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

这篇关于如果Bootstrap 4.5中的空间较少，则使用新的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！