为什么我的引导样式应用不正确?

尝试按以下方式更改代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-btn">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </span>
  </div>
</form>

正如您已经了解到的,这是因为引导版本。您使用的标记用于beta 3和Bootstrap 4的最终版本。最终的引导程序4实际上是 released yesterday .

详细信息:
Bootstrap 4没有太多更改 测试版2 到 beta 3版 ,但 输入组 正如在 beta 3 release notes 2017年12月28日。

在beta 2中,相应的类是 .input-group-addon 标记如下:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <button class="input-group-addon btn btn-outline-secondary" type="button">Button</button>
</div>

在beta 3中 .输入组加载项 已替换为 .input-group-{prepend|append} 标记改变了这一点:

<div class="input-group">
    <input type="text" class="form-control" placeholder="Placeholder">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>