为什么我的 bootstrap-styles 应用不正确？

Question

我将此表格从 bootstrap 页面复制到我的网站。

<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">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
</form>

由于某些原因，bootstrap 样式未正确应用。该按钮在左侧有一个 border-radius。

我通过 npm 添加了 Bootstrap，我正在使用它

../../../node_modules/bootstrap/dist/css/bootstrap.min.css

在angular-cli.json

编辑：我从 CDN 下载了 min.css，包含了那个并且它有效。这似乎是 npm 版本的问题。也许我使用了错误的文件？

Answer 1

尝试如下更改代码

<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>

Answer 2

你已经猜到了，这是因为 Bootstrap 版本。您使用的标记适用于 beta 3 – 以及最终的 Bootstrap 4 版本。最后的 Bootstrap 4 实际上是 released yesterday.

详细：
从Bootstrap 4 beta 2到beta 3变化不大，但是输入组 组件实际上被重写了，正如 2017 年 12 月 28 日 beta 3 release notes 中所述。

在 beta 2 中对应的 class 是 .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-addon 被 .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>

为什么我的 bootstrap-styles 应用不正确？

Why are my bootstrap-styles not applied correctly?

html

twitter-bootstrap

bootstrap-4

ng-bootstrap