twitter-bootstrap - Bootstrap 输入组前置不起作用

Question

我正在关注官方文档并查看许多示例以及其他人遇到的相同问题，但我没有看到任何解决方案。

在官方文档中正确显示，我看到的示例如下
https://getbootstrap.com/docs/4.0/components/input-group/#basic-example

我从官方文档中复制并粘贴以下代码

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

版本 Bootstrap :

Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)

Copyright 2011-2017

The Bootstrap Authors Copyright 2011-2017 Twitter, Inc. icensed under

MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

代码没有在官方页面中显示，它只是不起作用，我已经设法使它与 一起工作输入组插件 但我想知道为什么它不适用于官方网站的代码，因为我使用的是相同版本的 Bootstrap 。

我也没有任何解决方案就关注了这个线程:
Creating Bootstrap 4 input-group with beta 3 prepend/append not working

Answer 1

在 Bootstrap 4 Beta2 中，类名是 input-group-addon

<div class="input-group mb-3">
  <div class="input-group-addon">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

https://www.codeply.com/go/qJ5GDNQqb3 ( Bootstrap 4 测试版 2)

现在 Bootstrap 4.0.0 在这里，类名是 input-group-prepend这是文档中显示的内容。 文档适用于 4.0.0 ，而不是 4.0 Beta 2。

https://www.codeply.com/go/o7QZ2u7eCX ( Bootstrap 4.0.0)

要么升级到 Bootstrap 4.0.0，要么使用 input-group-addon对于 Bootstrap 4.0 Beta 2