如何根据屏幕尺寸（引导）对在导航栏中水平对齐的<ul>元素进行重新排序

凯文·托马斯

在我的html页面中，这些元素已正确固定在导航栏中。

1 2 3 4 5 6 7

当屏幕较小时，元素是垂直的

我设法减小的大小，navbar但元素是垂直的。我需要以较小的字体li水平对齐的元素navbar。我用于减少导航栏的代码如下。

@media only screen and (min-width: 400px) and (max-width: 992px) {
  .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    height: 54px
  }
  .navbar .nav ul {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    height: 30px;
    font-size: smaller;
    display: inline;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg  navbar-dark bg-primary">

  <a class="navbar-brand">
    <img src="https://via.placeholder.com/40x35" width="40" height="35" class="d-inline-block align-top">
    <span class="navbar-brand mb-1 h1">Byte Program</span>
  </a>
  <div class="nav navbar-nav ">
    <ul class="navbar-nav mx-3 mt-3 ">

      <li class="nav-item ">
        <p class="nav-text ">1 </p>
      </li>
      <li class="nav-item">
        <p class="nav-text ">2</p>
      </li>
      <li class="nav-item">
        <p class="nav-text ">3</p>
      </li>
      <li class="nav-item">
        <p class="nav-text "> 4</p>
      </li>
    </ul>
  </div>
</nav>

毁灭

您遇到了一些问题，大部分都没有覆盖Bootstrap基本样式。

默认情况下，它.navbar .nav是一个flex项目，在较小的屏幕上flex-direction是column-因此我将其设置为row
.navbar .nav ul也是flex父级，并且flex direction设置为column，所以我将其设置为row。而且由于ul还不够具体以覆盖引导程序样式，因此我添加了类选择器，ul.navbar-nav因此它比引导程序更具体。
ul.navbar-nav也是flex子级，因此您可以设置其flex属性（flex: 1 1 100%）。
我还margin向您的li商品中添加了一些商品，以便您可以看到它的正常运行。
min-width: 400px除非您在其他样式下进行某些操作，否则没有理由这么做。我在示例中将其删除，但是您当然可以放回去。

@media (max-width: 992px) {
  .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    height: 54px
  }
  .navbar .nav {
    flex-direction: row;
  }
  .navbar .nav ul.navbar-nav {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    height: 30px;
    font-size: smaller;
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: flex-end;
  }
  .navbar .nav ul.navbar-nav li {
    margin: 0 10px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg  navbar-dark bg-primary">

  <a class="navbar-brand">
    <img src="https://via.placeholder.com/40x35" width="40" height="35" class="d-inline-block align-top">
    <span class="navbar-brand mb-1 h1">Byte Program</span>
  </a>
  <div class="nav navbar-nav ">
    <ul class="navbar-nav mx-3 mt-3 ">

      <li class="nav-item ">
        <p class="nav-text ">1 </p>
      </li>
      <li class="nav-item">
        <p class="nav-text ">2</p>
      </li>
      <li class="nav-item">
        <p class="nav-text ">3</p>
      </li>
      <li class="nav-item">
        <p class="nav-text "> 4</p>
      </li>
    </ul>
  </div>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。