尽管有效地使用了断点,但是却无法找出这些断点的具体情况
1)col-md-auto
与col-auto
的工作方式有何不同?
2)justify-content-md-center
与justify-content-center
有何不同?
可以看到示例here
答案 0 :(得分:0)
在Bootstrap 4中,md
断点适用于屏幕宽度768px和更宽的屏幕。因此,所有使用的-md
CSS类都将在768px或更宽的像素上应用适当的CSS属性,并以较小的宽度恢复为默认行为。
“
col-md-auto
与col-auto
的工作方式有何不同?”
col-md-auto
是“中上”屏幕上的自然宽度列
宽度超过768像素。
col-auto
是所有屏幕宽度上的自然宽度列。
请记住,*-auto
宽度的列会缩小以适合其内容的宽度和水平(行)的布局。在小于768像素的屏幕宽度上, col-md-auto
将恢复为垂直堆叠全宽度,因为这是<div>
的默认行为。但是,col-auto
将保持水平,并缩小到所有屏幕宽度。
“
justify-content-md-center
与justify-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
。