时间戳

首页 > 解决方案 > 我怎样才能重新排序

css - 我怎样才能重新排序
    基于屏幕大小在导航栏中水平对齐的元素（引导程序）

问题描述

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

1 2 3 4 5 6 7

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

1
2
3
4
5
6

我设法减小了尺寸，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>

标签： cssbootstrap-4navbar

解决方案

您遇到了一些问题，主要是没有覆盖 Bootstrap 基本样式。

  1. 默认情况下，.navbar .nav是一个弹性项目，在较小的屏幕上，它flex-direction是column- 所以我将它设置为row
  2. .navbar .nav ul也是一个 flex 父级，并且 flex 方向设置为column，所以我将其设置为 row。而且由于ul不够具体，无法覆盖引导程序样式，因此我添加了类选择器ul.navbar-nav，因此它比引导程序更具体。
  3. ul.navbar-nav也是一个弹性孩子，所以你可以设置它的flex属性（flex: 1 1 100%）。
  4. 我还在margin你的li项目中添加了一些，这样你就可以看到它工作了。
  5. 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>

推荐阅读