Bootstrap4响应式导航栏文本缩放换行与切换按钮失效问题求助

Hey there, let's work through your two navbar problems step by step!

1. Preventing Menu Text from Wrapping on Browser Resize #

The root cause here is your long navbar-brand text—when the viewport shrinks, there isn’t enough horizontal space to fit it all on one line, so it wraps. Here are two easy fixes:

• Keep text on a single line: Add this CSS rule to your style.css file (or inline in a <style> tag) to force the brand text to stay unbroken:

  .navbar-brand {
    white-space: nowrap;
  }
  

• Truncate text on small screens (more responsive alternative): If you want to avoid pushing the toggler button too far, wrap the brand text in a span with Bootstrap’s text-truncate class and set a max-width:

  <a class="navbar-brand" href="tel:8005551212">
    <span class="d-inline-block text-truncate" style="max-width: 250px;">Call Us At (800) 555-1212 For An Appointment</span>
  </a>
  

  This will add an ellipsis (...) when the text exceeds the specified max-width.

2. Fixing the Non-Showing Dropdown Menu When Toggling #

You’re missing a tiny but critical detail in your toggler button: the # in the data-target attribute. Bootstrap uses this attribute to target the collapse element by its ID, so you need to include the hash symbol to reference the ID correctly.

Original (broken) button code: #

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navResponsive">
  <span class="navbar-toggler-icon"></span>
</button>

Corrected button code: #

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navResponsive">
  <span class="navbar-toggler-icon"></span>
</button>

Adding the # tells Bootstrap to look for the element with ID navResponsive, which matches your collapse div’s id="navResponsive".

Full Corrected Code #

Here’s the complete code with both fixes applied (I added the white-space: nowrap style inline for quick testing—feel free to move it to your style.css):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Test Website</title>
  <style>
    .navbar-brand {
      white-space: nowrap;
    }
  </style>
  <link rel="stylesheet" href="/styles/style.css">
</head>
<body>
  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
    <a class="navbar-brand" href="tel:8005551212">Call Us At (800) 555-1212 For An Appointment</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navResponsive">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 1 Test</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 2 Test</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 3 Test</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 4 Test</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 5 Test</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Page 6 Test</a></li>
      </ul>
    </div>
  </nav>
  <!-- End Navigation Bar -->

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</body>
</html>

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