Bootstrap 4使导航栏品牌图像在大屏幕上重叠并缩小以适合小屏幕

时间:2019-02-10 16:20:00

标签: css twitter-bootstrap bootstrap-4

这就是我想要做的。我想让导航栏品牌图像与导航栏重叠而不改变其高度(导航栏的固定高度为80px)。 有点用,但是我无法使图像完全曝光,它在顶部被剪切了。我尝试过vertical-align: top,但是它只是稍微改变了位置,图像仍被剪切。我希望它完全从屏幕顶部开始,没有任何填充。

在屏幕小于md的设备上,重叠的图像被隐藏,并且显示另一个图像,该图像现在应为img-fluid并将其大小调整为导航栏的大小。但是,当调整屏幕大小以使导航栏折叠时,导航栏尺寸保持80px,但是图像开始与之重叠,并且折叠触发按钮也变得混乱。 我怎样才能使这两个东西同时起作用?

这是一个codepen:https://codepen.io/anon/pen/QYmMyg

编辑:另外,我注意到将导航栏设置为固定高度实际上会阻止折叠工作,因为高度是有限的。有什么办法可以增加导航栏的高度并保持重叠的图像并保持折叠正常工作?

1 个答案:

答案 0 :(得分:0)

Document document = XMLLib.getDocumentResource("/userConfig.xml");

...将解决您的问题(其中.navbar-brand { transform: translateY(calc(50% - 40px)); padding-top: 0; } 40px高度的一半)。
工作示例:https://codepen.io/andrei-gheorghiu/pen/pGLrOZ

问题出在.navbar上,您不想惹它。


Ref:“编辑” ,这是一个完全不同的问题。在这里回答问题会对任何有类似问题的人都是有害的,因为这会减少他们找到答案的机会。
避免一次询问多个问题。您的问题需要对有类似问题的任何人保持帮助,因此您需要单独询问。