2017-08-11 21 views
6

由于新的自举4从使用“浮动”元素以更好的“Flexbox的”方法进行迁移,只是不知道是它确定构建使用.d-flex整个网格结构而不是现有的.container .row .col方式?与更换山口d-FLEX在自举4

因为它们都是使用flexbox从根本上构建的,所以我没有发现用另一个替换它的缺点。实际上我觉得.d-flex要求少一些css类名并且在html中使事情更具可读性。

还有为什么我喜欢d-flex比老col其他原因:

  1. 水平和垂直元素 - d-Flex支持创建元素在水平方向(.flex行)和垂直(.flex -柱)。 Col仅支持水平。

  2. 行内元素 - 元素的宽度将从子级继承,并且可以使用d-inline-flex动态对齐。 col网格已修复。

  3. 提前重新排序 - d-Flex使用.order-x和col使用.push.pull。在我看来,d-flex更直观,元素的顺序通过编号来表示,另一方面,.col中的数字表示有多少个网格正在推动和拉离之前的状态。当你构建一个更复杂的网站时,它会变得混乱......

如果我错了,请纠正我。

回答

5

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

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

要回答你的3分:

  1. 水平和垂直元素

    只需使用普通.row类实现了Flexbox的网格。您甚至可以添加.flex-columneven with breakpoints,如.flex-{breakpoint}-column)。知道.row类具有flex-wrap: wrap属性。

  2. 内联元素

    列的宽度不一定是固定的:

    • 可以使用.col-auto设置width: auto在您的专栏
    • 可以使用the unit-less.col类,使列使用可用空间
    • 您可以将它们与所有的flex工具对齐Bootstrap provides
    • 你可以mix column sizes(一些固定的和一些动态的):例如其次.col.col-lg-2
  3. 提前重新排序