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 v4.0.0-beta.2 ( https://getbootstrap.com )

版权所有 2011-2017

Bootstrap 作者 版权所有 2011-2017 Twitter, Inc.

麻省理工学院（https://github.com/twbs/bootstrap/blob/master/LICENSE）

该代码未在官方页面中显示，它只是不起作用，我设法使其与input-group-addon 一起使用，但我想知道为什么它不能与官方网站的代码一起使用，因为我我正在使用相同版本的引导程序。

我也跟着这个线程没有任何解决方案： 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（引导程序 4 Beta 2）

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

https://www.codeply.com/go/o7QZ2u7eCX（引导程序 4.0.0）

升级到 Bootstrap 4.0.0，或input-group-addon用于 Bootstrap 4.0 Beta 2