gpt4 book ai didi

html - CSS 计算宽度增加边距

转载 作者:太空宇宙 更新时间:2023-11-04 11:25:29 24 4
gpt4 key购买 nike

我被难住了。我正在使用带有 Logo 的 Bootstrap 3 静态导航栏。我不喜欢响应式图像的工作方式,所以我只想计算 Logo (图像)的大小为 100% - 200px(汉堡包切换宽度)。我这样做是为了使 Logo 和汉堡包可以保持在同一“行”上,并且不会增加导航栏的高度。

这是我的代码片段。

<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsable-nav">
Menu &nbsp;<i class="fa fa-2x fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png"/>
</a>
</div>
....
</div>

在我的 CSS 中,如果我添加

.navbar-brand img{
width:calc(100% - 200px);
height: auto;
}

然后使用 Chrome 开发者工具,我在右边看到了额外的边距。 screenshot in chrome dev tools

但是在 css 中没有定义额外的(右)边距。

enter image description here

现在,如果我手动将 chrome 开发工具中的宽度更改为计算出的宽度(在此示例中为 310 像素)——那么它可以正常工作。

screenshot - manually changing to fixed pixels

似乎当我使用计算出的宽度时,它添加了右边距,这导致 Logo 和汉堡包分成不同的行。我已经在 Chrome 开发工具中检查了我的 CSS,并对这两个示例进行了比较——但找不到差异。

任何关于为什么会发生这种情况以及如何解决它的指导将不胜感激。如果您需要更多代码片段,请告诉我。

最佳答案

请尝试使用 float 选项。

即:

在“navbar-brand”中使用“pull-left”类并指定宽度

.navbar-brand {
width: calc(100% - 20px);
}
.navbar-brand img{
width: 100%;
height: auto
}

这可能对你有帮助。

关于html - CSS 计算宽度增加边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32419586/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com