时间戳

首页 > 解决方案 > Bootstrap 4 make the navbar-brand image overlap on big screen & shrink-to-fit on small screen

css - Bootstrap 4 make the navbar-brand image overlap on big screen & shrink-to-fit on small screen

问题描述

Here's what I'm trying to do. I want to have the navbar-brand image overlapping the navbar without altering it's height (navbar has fixed height of 80px). It kinda works, however I cannot get the image to fully expose, it's being cut at the top. I tried vertical-align: top but it just slightly changes the position, the image is still being cut off. I want it to start exactly at the top of the screen, without any padding.

On devices with screens smaller than md the overlapping image is being hidden and another one is show, which should now be img-fluid and adjust it's size to the size of the navbar. However when resizing the screen so the navbar collapses, the navbar size remains 80px but the image starts overlapping it and the collapse-toggler button gets also messed up. How can I get both of these things to work?

Here's a codepen: https://codepen.io/anon/pen/QYmMyg

Edit: Also, I noticed that setting the navbar to a fixed height actually prevents the collapse from working, because the height is limited. Is there any way I could increase the navbar height and keep the overlapping image and also keep the collapse working?

标签： csstwitter-bootstrapbootstrap-4

解决方案

.navbar-brand {
  transform: translateY(calc(50% - 40px));
  padding-top: 0;
}

...将解决您的问题（40px高度的一半在哪里.navbar）。
工作示例：https ://codepen.io/andrei-gheorghiu/pen/pGLrOZ

问题根源于.navbar>.container { align-items: center;}你不想惹的祸。

Ref: "Edit"，这完全是一个不同的问题。在这里回答它对任何有类似问题的人都是有害的，因为它会降低他们找到答案的机会。
避免一次问多个问题。你的问题需要对任何有类似问题的人都有帮助，所以你需要单独问他们。

推荐阅读