Question

我很难过。我正在使用带有徽标的Bootstrap 3静态导航栏。我不喜欢响应式图像的工作方式，因此我只想计算徽标（图像）的大小为100％ - 200px（汉堡包切换的宽度）。我这样做是为了让徽标和汉堡可以保持同一条线路＃34;并且不要增加导航栏的高度。

这是我的代码段。

<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开发者工具，我在右侧看到额外的保证金。

但是在css中没有定义额外（右）边距。

现在，如果我手动将chrome dev工具的宽度更改为计算出的宽度（在本例中为310px） - 那么它可以正常工作。

似乎当我使用计算出的宽度时，它会添加一个右边距，这会导致徽标和汉堡包分成不同的线条。我已经在Chrome开发工具中查看了我的CSS，并对这两个示例进行了分析 - 但无法找到差异。

关于为什么会发生这种情况以及如何解决问题的任何指导将不胜感激。如果您需要更多代码段，请与我们联系。

Answer 1

请尝试使用浮动选项。

即：

使用＆＃34;左拉＆＃34;在＆＃34; navbar-brand＆＃34;并指定宽度

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

这可能会对你有帮助。

Answer 2

你应该尝试将整个nav元素包装在＆＃34; container-fluid＆＃34;作为bootstrap的javascript，bootstrap中的样式可能会介入你的nav元素之间，并添加＆＃34; container-fluid＆＃34;或者（全尺寸响应容器＆＃34;只是你的nav-header元素。

首先改变：

<nav class="navbar navbar-fixed-top" role="navigation">
 <div class="container-fluid">
  <div class="navbar-header">

要：

<div class="container-fluid"> <!--Move this around entire nav element oor eliminate entirely-->
 <nav class="navbar navbar-fixed-top" role="navigation">
  <div class="navbar-header">

Answer 3

这不是实际的保证金。当块元素未扩展到全宽时，开发工具会将多余的空间显示为边距以显示布局。

在您的情况下，请检查此元素是否继承了display的任何值。

添加float将删除此突出显示。

Answer 4

问题在于navbar-brand元素的宽度。我将其宽度更改为

width:calc(100% - 200px);

然后将徽标的宽度设置为

width: calc(100% - 10px);

这给了我预期的效果，我没有带有换行符的导航栏品牌标识。

Answer 5

使用下面的代码来解决上面的div宽度问题。如果在不同浏览器中显示不同，则为Moz -moz-box-sizing:border-box写一个

Webkit -webkit-box-sizing:border-box;
box-sizing:border-box;

CSS计算的宽度会增加边距

5 个答案: