我有一个 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"
}
}
更新:
- 计算得出的漂亮按钮的 CSS(本地):
- 计算出的难看按钮的 CSS(生产):
最佳答案
解决方案相当简单:
将 btn-lg 类添加到您的按钮。就是这样。任务完成!
但请进一步查看下面的更多选项...
重要提示:请确保加载 Bootstrap 4 的发布版本，而不是加载“Bootstrap 4.0.0-beta”，因为 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 类另外添加到 输入组-btn。这将真正将按钮与输入“合并”。
如果您对这个外观不是 100% 满意，您仍然有选择。
从 search-bar-button 中删除 btn-light 或向其中添加 btn-outline-secondary 类。
以下是所有 4 个选项，可以在视觉上相互比较:
<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>关于Google Cloud 上的 Angular 应用程序 : Bootstrap 4 btn doesn't fit in input-group-btn，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48558655/