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 一起工作，但我想知道它为什么不因为我使用相同版本的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 Beta 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

Bootstrap输入组 - 前置不起作用

1 个答案: