关于html：Bootstrap Angular 5移动行不内联

Bootstrap Angular 5 mobile row not inline

当宽度小于579px时，如何将行调整为内联？
我需要它在移动设备上与在台式机上相同。

1
2
3
4
5
6
7

"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
"../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
"styles.scss",
"../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{{contact.firstName}} {{contact.lastName}}

<i class="fa fa-map-marker" title="{{address}}">

<i class="fa fa-phone" title="{{contact.phoneNumber}}">

<i class="fa fa-envelope" title="{{contact.email}}">

<button type="button" mat-mini-fab color="primary" (click)="edit(contact)">
<i class="fa fa-edit left">
</button>

<button type="button" mat-mini-fab color="warn" (click)="delete(contact)">
<i class="fa fa-trash left">
</button>

enter

您可以看到上部设置为col-1模式，下部设置为以前的配置。

所有这些使我相信，我需要以某种方式在Angular-CLI项目中的某处调整对CSS的引用。
现在，当我使用Material Design和MDBootstrap时，必须为我提供对响应能力的支持，这很奇怪，但事实并非如此。

package.json

1	"angular-bootstrap-md":"^6.0.1",

在angular上，我认为最好不要将css文件放在index.html中。
我可能可以npm安装bootstrap包，但问题是它将覆盖并弄乱其他框架-Material Design和MDBoostrap吗？

我会在此处尝试更新。.

Update

npm安装引导程序

1	"bootstrap":"^4.1.1",

为angular-cli项目安装了bootstrap 4
但对代码没有影响。
：(

Update

在清除缓存和刷新后工作。很酷。谢谢大家！

仍然需要针对PC和移动设备进行调整。
现在无论如何都很难看(尤其是移动)，但这是一个很好的方向。
谢谢！

enter

相关讨论

使用col-1代替使用col-xs-1(xs在bootstrap-4中不存在)

请参阅小提琴：https：//jsfiddle.net/jpfgtrc3/3/

实际上您仅不需要其他(col-md-1 ...)col-1：https：//jsfiddle.net/jpfgtrc3/5/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

要更新：

使用p-o至col-*和d-none d-sm-block至

请参阅小提琴：https：//jsfiddle.net/jpfgtrc3/14/