html – 在Bootstrap 4中用d-flex替换col

发布时间：2020-12-14 16:41:17 所属栏目：资源来源：网络整理

导读：由于新的Bootstrap 4正在从使用“浮动”元素迁移到更好的“flexbox”方法,只是想知道使用.d-flex而不是现有的.container .row .col方式构建整个网格结构是否可行？由于它们都是使用flexbox从根本上构建的,所以我看不出任何替换它们的缺点.事实上,我觉得.d-f

由于新的Bootstrap 4正在从使用“浮动”元素迁移到更好的“flexbox”方法,只是想知道使用.d-flex而不是现有的.container .row .col方式构建整个网格结构是否可行？

由于它们都是使用flexbox从根本上构建的,所以我看不出任何替换它们的缺点.事实上,我觉得.d-flex需要更少的css类名,并使html中的内容更具可读性.

还有其他原因我喜欢d-flex而不是旧col：

>水平和垂直元素 – d-flex支持水平(.flex-row)和垂直(.flex-column)创建元素. Col仅支持水平.
>内联元素 – 元素的宽度将继承自子元素,并且可以使用d-inline-flex动态对齐. col网格是固定的.
>提前重新排序 – d-flex使用.order-x和col使用.push和.pull.在我看来,d-flex更直观,元素的顺序通过编号表示,另一方面.col中的数字是从前一个状态推动和拉开的网格数量.当你构建一个更复杂的网站时,它会变得混乱….

如果我错了,请纠正我.

解决方法

Bootstrap 4 beta刚刚离开,整个网格系统从现在开始使用flexbox.

您现在可以只使用flex实现整个网格,并且减少了所需的类数. Bootstrap网格系统的主要优点是你的列周围有填充,而.row包装上有负边距.这样,当列包裹时(例如在较小的屏幕上),它们将保持正确对齐.

回答你的3点：

>水平和垂直元素

只需使用常规.row类即可实现flexbox网格.您甚至可以添加.flex-column(even with breakpoints,如.flex- {breakpoint} -column).知道.row类有flex-wrap：wrap属性.
>内联元素

列宽不一定是固定的：

>您可以使用.col-auto在列上设置width：auto
>您可以使用the unit-less .col类使列使用可用空间
>您可以将它们与所有Flex实用程序Bootstrap provides对齐
>你可以mix column sizes(一些固定的和一些动态的)：例如.col-md-auto后跟.col.col-lg-2

>提前重新订购

> .col-push / pull- {breakpoint} has been replaced by .order-{breakpoint}.
>您可以使用margin utilities(例如m- {breakpoint} -auto)来替换.col-offset- {breakpoint}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!