为什么我的引导样式没有正确应用？答案

【问题标题】：Why are my bootstrap-styles not applied correctly?为什么我的引导样式没有正确应用？
【发布时间】：2018-06-26 09:15:11
【问题描述】：

我将此表单从引导页面复制到我的网站。

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

由于某种原因，引导样式未正确应用。该按钮的左侧有一个边框半径。

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

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

在 angular-cli.json 中

编辑：我从 CDN 下载了 min.css，包含了那个并且它可以工作。这似乎是 npm-version 的问题。也许我使用了错误的文件？

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4 ng-bootstrap

【解决方案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>

【讨论】：

我试过这个，它也破坏了我的导航栏，但没有改进输入。当我将链接标签作为导入语句移动到我的 styles.css 中时，同样的事情发生了。我正在使用 Bootstrap v4.0.0-beta.2，这会造成问题吗？
我检查了这个，在 ngBootstrap 页面上它说它是用 4.0.0-beta.3 测试的

【解决方案2】：

正如您已经知道的那样，这是因为 Bootstrap 版本。您使用的标记适用于 beta 3 和最终的 Bootstrap 4 版本。最终的 Bootstrap 4 实际上是 released yesterday。

详细说明：
从 Bootstrap 4 beta 2 到 beta 3 的变化并不多，但实际上重写了 Input group 组件，正如在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-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>

【讨论】：