Bootstrap navbar-right屏幕缩小时居底：移动端需保持右侧显示

Got it, let's fix that stubborn navbar-right issue on mobile screens! The problem here is that Bootstrap 3's default navbar behavior stacks navigation items vertically when the screen is smaller than 768px, which pushes your navbar-right content to the bottom. Here's how to keep it aligned to the right on mobile:

Step 1: Add Custom CSS #

Add this CSS snippet to your stylesheet to override the default responsive behavior:

/* Keep navbar-right aligned right on mobile */
@media (max-width: 767px) {
  #admin_nav .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* Prevent wrapping if content is too long */
  }
  
  #admin_nav .navbar-nav.navbar-right {
    margin: 0;
    display: flex;
    align-items: center;
  }
  
  /* Match default navbar padding for consistency */
  #admin_nav .navbar-nav.navbar-right > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

What this CSS does: #

• Uses flexbox on the navbar container to align items horizontally, with space between the left menu button and right user info
• Forces the navbar-right list to display flex instead of stacking vertically
• Keeps padding consistent with the default navbar style to avoid awkward layout shifts

Step 2: Updated Full Code #

Here's your complete navbar code combined with the fix:

<nav class="navbar navbar-default" id="admin_nav">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand" id="side_menu">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-user" aria-hidden="true"></i>&nbsp; Welcome, Admin
        </a>
      </li>
    </ul>
  </div>
</nav>

<!-- Add the CSS either in a stylesheet or <style> tag -->
<style>
@media (max-width: 767px) {
  #admin_nav .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
  #admin_nav .navbar-nav.navbar-right {
    margin: 0;
    display: flex;
    align-items: center;
  }
  
  #admin_nav .navbar-nav.navbar-right > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
</style>

This will make sure your "Welcome, Admin" text stays aligned to the right side of the navbar, even on mobile-sized screens.

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