先决条件
- 我有一个 searched 用于处理重复或已关闭的问题
- 我有一个 validated 的任何HTML以避免常见的问题
- 我阅读了 contributing guidelines
描述问题
我发现 Floating-Label 的标签在与5.3版本(根据其他问题已经修复)进行一些错误的省略号操作时,没有完全对齐。这是5.2版本网站的截图(为了有正确的版本):
我建议更改以使标签与两侧更好地对齐:
减少的测试用例
这个问题发生的原因在于以下css属性:
.form-floating>.form-select~label
transform: scale(.85) translateY(-.5rem) translateX(.15rem)
缩放因子减小了变换之前的100%。
因此,实际宽度是100%*0.85而不是100%。
此外,由于translateX和translateY,左侧的对齐也不是完美的。
我建议以下更改:
.form-floating>.form-select~label
padding-top: 0.5rem /*same adjustment as the transformY to display the label above the input */
padding-bottom: 1.5rem /* adjust for transformY as well*/
font-size: 85% /* adjusts the size of the text in the same way as scale */
感谢您的工作!
您正在哪个操作系统上看到问题?
Windows
您正在哪个浏览器上看到问题?
Chrome
您使用的Bootstrap版本是什么?
v5.2(未在5.3上测试)
2条答案
按热度按时间ztyzrc3y1#
PS:示例和代码仅展示了select-input,但这个问题影响了所有的浮动标签。
nxowjjhe2#
PR #40735 修复了作者提到的浮动标签对齐问题。通过在_variable.scss文件中创建3个新的变量(padding-top、padding-bottom和font-size),并将它们注入到forms/_floating-labels.scss文件中,实现了这一更改。
@Alken0,你也可以在此处查看。
请尽快合并此PR。