小屏幕下次级导航列表显示及非隐藏次级导航HTML代码需求

I’ve got you covered on both requirements: making the subnav display as a list on small screens and ensuring it never gets hidden. Here’s a straightforward implementation:

Modified HTML Code #

First, let’s clean up the truncated HTML and add standard Bootstrap classes for consistency:

<nav id="subnav" class="navbar navbar-expand-md navbar-default bg-light text-uppercase custom-nav">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">Language Equality</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">articles</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">help</a>
    </li>
    <!-- Add any remaining truncated nav items here -->
  </ul>
</nav>

I added the nav-item class to each list item—this aligns with Bootstrap’s navbar structure and makes styling easier.

CSS for Small Screen Behavior #

Add this CSS to override Bootstrap’s default hiding behavior and force a vertical list layout on screens smaller than the md breakpoint (768px):

/* Prevent subnav from collapsing/hiding on small screens */
#subnav .navbar-collapse {
  display: block !important;
}

/* Style as vertical list on screens <768px */
@media (max-width: 767px) {
  #subnav .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  
  #subnav .nav-item {
    margin-bottom: 0.5rem; /* Add spacing between list items */
  }
  
  #subnav .nav-link {
    padding: 0.5rem 1rem; /* Adjust padding for better mobile usability */
  }
}

Quick Breakdown of Changes: #

• The !important rule ensures Bootstrap’s default collapse logic doesn’t hide the subnav on small screens.
• The media query switches the horizontal navbar-nav to vertical, creating a proper list layout for mobile.
• Margin and padding tweaks improve readability and touch-target size on small devices.

This setup keeps your subnav visible at all screen sizes, and renders it as a clean, user-friendly vertical list on mobile.

内容的提问来源于stack exchange，提问作者user3527068