Bootstrap:在某些特定情况下使用断点,即col-md-auto justify-content-md-center

时间:2018-10-31 10:07:10

标签: twitter-bootstrap bootstrap-4

尽管有效地使用了断点,但是却无法找出这些断点的具体情况

1)col-md-autocol-auto的工作方式有何不同?

2)justify-content-md-centerjustify-content-center有何不同?

可以看到示例here

1 个答案:

答案 0 :(得分:0)

在Bootstrap 4中,md断点适用于屏幕宽度768px和更宽的屏幕。因此,所有使用的-md CSS类都将在768px或更宽的像素上应用适当的CSS属性,并以较小的宽度恢复为默认行为。

  

col-md-autocol-auto的工作方式有何不同?”

  • col-md-auto是“中上”屏幕上的自然宽度列 宽度超过768像素。

  • col-auto是所有屏幕宽度上的自然宽度列。

请记住,*-auto宽度的列会缩小以适合其内容的宽度和水平(行)的布局。在小于768像素的屏幕宽度上, col-md-auto将恢复为垂直堆叠全宽度,因为这是<div>的默认行为。但是,col-auto将保持水平,并缩小到所有屏幕宽度。

  

justify-content-md-centerjustify-content-center有何不同?”

  • justify-content-md-center是Flexbox在“中上”屏幕上的中心 宽度超过768像素。

  • justify-content-center在所有屏幕宽度上都是flexbox中心。

flexbox的默认对齐方式是“开始”(或与flex-direction:row左对齐),因此justify-content-md-center仅适用于md-up-up,然后还原为较小屏幕上的默认行为justify-content:start

演示:https://www.codeply.com/go/tdQYPLOsq4