gpt4 book ai didi

css - 如何比较 Angular Flex Layout 和 Bootstrap 4 网格系统?

转载 作者:行者123 更新时间:2023-12-04 01:05:35 24 4
gpt4 key购买 nike

我习惯于使用 Bootstrap,对我来说,网格系统在我的脑海中非常清晰。现在,我正在尝试使用 Angular Flex 布局,即使阅读文档,我也不明白如何使用它。

例如,我有以下使用 Bootstrap 4 的代码:

<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
<div class="col-sm-12 col-md-8 col-lg-4">
Something...
</div>
</div>
</div>

如何使用 Angular Flex Layout 编写相同的代码?

最佳答案

在 angular-flex-layout 中,我们没有网格,因此您必须以这种方式处理它才能获得与使用引导网格系统相同的结果:

<div fxLayout="row wrap"
fxLayout.sm="column" >

<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:red">
first-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:blue">
second-section
</div>
<div fxFlex.lg="33.333%" fxFlex.md="66.667%" fxFlex.lt-sm="100%" style="background-color:yellow">
third-section
</div>
</div>

请注意响应断点可能不同。

关于css - 如何比较 Angular Flex Layout 和 Bootstrap 4 网格系统?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57007360/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com