为何Bootstrap 4中Input Group组件无法正常渲染？

Ah, I’ve run into this exact headache when migrating from Bootstrap 3 to 4! The issue comes down to two critical breaking changes in Bootstrap 4’s input group component that make your old Bootstrap 3 code incompatible:

1. .input-group-addon was replaced with a new, structured layout #

In Bootstrap 3, you could simply add a .input-group-addon span right next to your input to attach icons or text. But Bootstrap 4 completely reworked this component for better flexibility, and the old .input-group-addon class was removed entirely.

Instead, you now need to wrap your addon elements in a container that defines their position relative to the input:

• For addons before the input: Use .input-group-prepend wrapping a .input-group-text span
• For addons after the input: Use .input-group-append wrapping a .input-group-text span

Without this new structure, your addons won’t inherit the correct padding, alignment, or sizing styles—this is why your layout looks broken.

2. Glyphicons are no longer included by default #

Bootstrap 4 dropped Glyphicons from its core package. That means your <i class="glyphicon glyphicon-user"></i> tags won’t render any icons at all (you’ll just see empty space where the icon should be). If you still want to use Glyphicons, you’ll need to include their CSS separately, but most developers switch to Font Awesome (Bootstrap 4’s recommended icon library) instead.

Fixed Bootstrap 4 Example Code #

Here’s how to update your code to work smoothly with Bootstrap 4.1.0 (I’ve swapped Glyphicons for Font Awesome icons, but you can adjust if you stick with Glyphicons):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <!-- Add Font Awesome for icons (since Bootstrap 4 doesn't include Glyphicons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Input Groups</h3>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
  <p>Use .input-group-prepend/.input-group-append with .input-group-text to attach icons or help text next to the input field.</p>
  
  <form>
    <div class="input-group mb-3"> <!-- Added mb-3 for consistent margin instead of <br> -->
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
      </div>
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-lock"></i></span>
      </div>
      <input id="password" type="password" class="form-control" name="password" placeholder="Password">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Text</span>
      </div>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
    </div>
  </form>
  
  <br>
  <p>It can also be used on the right side of the input:</p>
  
  <form>
    <div class="input-group mb-3">
      <input id="email" type="text" class="form-control" name="email" placeholder="Email">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-user"></i></span>
      </div>
    </div>
    <div class="input-group mb-3">
      <input id="password" type="password" class="form-control" name="password" placeholder="Password">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fas fa-lock"></i></span>
      </div>
    </div>
  </form>
</div>
</body>
</html>

A quick side note: I replaced the <br> tags with Bootstrap’s margin utility class mb-3 for more consistent spacing—this is part of Bootstrap 4’s utility-first design philosophy that makes layout adjustments easier.

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan