Google Cloud上的Angular应用程序：Bootstrap 4 btn不适合input-group-btn

Question

我有一个带有搜索栏的Angular 4应用程序和一个带有此代码的按钮：

<div class="input-group input-group-lg">
<input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput"
  type="text" class="form-control" placeholder="Search ..." aria-label="....">
<span class="input-group-btn">
  <button (click)="..."
    class="btn btn-light search-bar-button" type="button"><i class="fa fa-search"></i></button>
</span></div>

本地搜索栏按钮看起来很好：

但是在我将代码推送到Google Cloud之后，该按钮看起来并不相同：

我甚至在本地尝试过生产模式，但按钮看起来很好，所以我无法弄清楚可能是什么问题。我只能怀疑云构建存在问题。我认为在云上出现构建错误后发现了这个问题，我通过将angular/cli更改为@angular/cli": "1.7.0-beta.1来解决了这个错误。在将更改推送到Google Cloud时，任何其他更高或更低的cli版本都会出错。

Google Cloud日志看起来很好，除了那些：

我的package.json是：

{
  "name": "something.org",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/something": "0.0.30",
    "jquery": "3.3.1",
    "popper.js": "1.12.9",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-slim-loading-bar": "^4.0.0",
    "ngx-bootstrap": "^2.0.0-beta.4",
    "ngx-infinite-scroll": "^0.5.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0-beta.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/something": "0.0.30",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~8.0.19",
    "codelyzer": "~3.1.2",
    "jasmine-core": "~2.7.0",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.3.0",
    "tslint": "~5.5.0",
    "typescript": "~2.3.4"
  }
}

更新

1. 好看按钮的计算css（本地）：
2. 计算错误的按钮（生产）的css：

Answer 1

您可以忽略有关fs-events的错误。这是一些想法

1. 在本地运行生产模式时，请确保在DevTools中清除和/或禁用缓存。
2. 在Google云上运行时，是否存在无法加载图片或脚本或任何内容的控制台错误？也许某些东西无法加载，但在本地工作。
3. 检查应用于相关元素的样式，并比较本地运行的制作与Google Cloud上运行的内容。不是差异并报告，也许它将有助于缩小问题范围

Answer 2

解决方案很简单：

将btn-lg课程添加到您的按钮。而已。任务完成！

但请查看下面的更多选项......

重要提示：确保您加载Bootstrap 4的发布版本而不是加载“Bootstrap 4.0.0-beta”，因为测试版已过时并且知道在这里和那里打破东西。

工作代码段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   
<div class="container mt-3">
    <div class="row">
        <div class="col-6">
            <div class="input-group input-group-lg">
                <input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput" type="text" class="form-control" placeholder="Search ..." aria-label="....">
                <span class="input-group-btn">
                    <button (click)="..." class="btn btn-lg btn-light search-bar-button" type="button"><i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>

但是，如果您想让整个内容看起来“完美完美”，那么您需要将input-group-append类另外添加到input-group-btn。这将真正“合并”按钮与输入。

如果你对这种表情不是100％满意，你仍然可以选择。

从btn-light删除search-bar-button或将类btn-outline-secondary添加到该<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container mt-3"> <div class="row"> <div class="col-6"> <div class="input-group input-group-lg"> <input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput" type="text" class="form-control" placeholder="Search 4 ..." aria-label="...."> <span class="input-group-append input-group-btn"> <button (click)="..." class="btn btn-lg btn-light btn-outline-secondary search-bar-button" type="button"><i class="fa fa-search"></i> </button> </span> </div> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-6"> <div class="input-group input-group-lg"> <input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput" type="text" class="form-control" placeholder="Search 3 ..." aria-label="...."> <span class="input-group-append input-group-btn"> <button (click)="..." class="btn btn-lg search-bar-button" type="button"><i class="fa fa-search"></i> </button> </span> </div> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-6"> <div class="input-group input-group-lg"> <input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput" type="text" class="form-control" placeholder="Search 2 ..." aria-label="...."> <span class="input-group-append input-group-btn"> <button (click)="..." class="btn btn-lg btn-light search-bar-button" type="button"><i class="fa fa-search"></i> </button> </span> </div> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-6"> <div class="input-group input-group-lg"> <input #searchBox (keyup)="..." [value]='...' id="lgFormGroupInput" type="text" class="form-control" placeholder="Search ..." aria-label="...."> <span class="input-group-btn"> <button (click)="..." class="btn btn-lg btn-light search-bar-button" type="button"><i class="fa fa-search"></i> </button> </span> </div> </div> </div> </div>。

以下是可视化比较的所有4个选项：

psql -h 192.168.99.100 -p 15432 -U postgres