图像有时默认为0宽

时间:2018-06-13 13:51:07

标签: html twitter-bootstrap-3

我正在使用bootstrap为客户端构建一个站点,由于某种原因,我在nav-icons中使用的图像并不总是出现。

当我第一次加载页面时,我注意到图像没有出现并且宽度为0.如果重新加载页面,图像会显示出来。

这里有什么东西或者我能做些什么来确保他们总是在那里并且没有那个打嗝?

以下是nav-bar的代码:

    <nav class="navbar navbar-collapse text-center navbar-expand-lg mt-4 navbar-light">
        <button class="navbar-toggler nav-btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon float-right"></span>
        </button>
        <div class="collapse navbar-collapse px-0" id="navbarSupportedContent">
            <ul class="navbar-nav algin-items-center d-flex ml-5 pl-5">
                <li class="nav-item col-2 text-center expand-lg"><a href="#" class="nav-link">Home</a></li>
                <img src="images/shapeimage_1.png" width="26" height="26" class="nav-ico after my-auto" />
                <li class="nav-item col-2 text-center" id="about"><a href="#" class="nav-link">About Us</a></li>
                <img src="images/dogpaw_1.png" width="26" height="26" class="nav-ico after my-auto" />
                <li class="nav-item col-2 text-center" id="services"><a href="#" class="nav-link">Services</a></li>
                <img src="images/icon-bowl_46.png" width="26" height="26" class="nav-ico after my-auto" />
                <li class="nav-item col-2 text-center id="adopt""><a href="#" class="nav-link">Adopt</a></li>
                <img src="images/heart2_3.png" width="26" height="26" class="nav-ico after my-auto" />          
                <li class="nav-item col-2 text-center" id="donate"><a href="#" class="nav-link">Donate</a></li>
                <img src="images/icon-house_46_1.png" width="26" height="26" class="nav-ico after my-auto" />           
                <li class="nav-item col-2 text-center" id="events"><a href="#" class="nav-link">Events</a></li>
            </ul>
        </div>
    </nav>

li 之间的图像有时会改变宽度。

我通常以chrome打开,开发人员工具显示图像在那里且没有中断,但宽度为0.

重新加载页面并且它们在那里没有任何问题,并且通常在每次重新加载时保持不变,除非我 Ctrl + F5 并强制从服务器加载。

1 个答案:

答案 0 :(得分:0)

好的,在查看评论并进行一些试验和错误之后,似乎只需将core.symlinks=false core.autocrlf=true color.diff=auto color.status=auto color.branch=auto color.interactive=true pack.packsizelimit=2g help.format=html http.sslcainfo=/ssl/certs/ca-bundle.crt diff.astextplain.textconv=astextplain rebase.autosquash=true filter.lfs.clean=git-lfs clean -- %f filter.lfs.smudge=git-lfs smudge -- %f filter.lfs.process=git-lfs filter-process filter.lfs.required=true credential.helper=manager user.name=*masked* user.email=*masked* 添加到img标记就足以让它们始终保持稳定。它们仍然在我的断点处崩溃并按照我的要求工作而没有任何明显的副作用。谢谢@Bogdan Lapchenkov的想法和建议。如果是答案配对,我会给你答案。