html - Bootstrap 3 中神秘隐藏的图像

Question

简短摘要

使用 bootstrap 时，图像从我的页面神秘地消失了

问题

我玩游戏有点晚了，但我认为现在是真正开始学习 bootstrap 的好时机，所以我启动了 less 版本并开始自定义并获得一些主题。

我现在面临的问题是页面上的图像并不总是出现。我可以确认它们正在加载到页面中，只是该元素的显示属性设置为无。如果我在 Firebug 中切换图像显示，图像将正确显示。请查看随附的 Firebug 输出

更新

在 chrome 中尝试之后，我收到了更奇怪的结果。我不知道这是我没有正确使用 Bootstrap 还是什么。基本上，导航栏的高度不断变化，登录和注册按钮的位置被忽略，这与 firefox 不同

这是一个更新的 fiddle :<强> http://jsfiddle.net/sw6v3gjy/

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ URL::route('home') }}">
                <img alt="commission cafe" src="path/to/my/image.gif"/>

            </a>
            <h1 class="navbar-text">Commission Caf&eacute;</h1>
            <br />
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search for artists"/>
                </div>
                <button type="submit" class="btn btn-default">Go</button>
            </form>

        </div>

        <div class="row">
            <div class="col-lg-5 co-navbar-links pull-right">
                <a href="#" class="navbar-link">Other</a>
                <a href="#" class="navbar-link">Browse</a>
                <a href="#" class="navbar-link">Trending</a>
                <a href="#" class="navbar-link">Other</a>
                <span class="login-dropdown-span dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">
                        <span id="login-dropdown" class="btn-login-dropdown">Login</span>&nbsp;<span class="caret"></span>
                    </button>
                    <ui class="dropdown-menu" style="padding:15px 5px;" role="menu" aria-labeledby="login-dropdown">
                        <form id="login-form">
                            <li>
                                <div class="form-group">
                                    <input type="text" name="email" class="form-control" placeholder="Email Address" id="login-email"/>
                                </div>
                            </li>
                            <li>
                                <div class="form-group">
                                    <input type="password" name="password" class="form-control" placeholder="Password" id="login-password"/>
                                </div>
                            </li>
                            <li>

                                <button class="btn btn-primary" id="login-btn" name="login">Submit</button>
                            </li>
                        </form>
                    </ui>
                </span>
                <button onclick="location.href='{{ URL::route('registration.page') }}'" class="btn-register btn btn-default" type="button">Register</button>
            </div>



        </div>
    </div>
</nav>

Answer 1

这不是确定的答案，但我发现问题与我使用的 GIF 图像有关。出于某种原因，bootstrap 真的不喜欢那样。我使用了 PNG，现在一切正常。我将继续对导致 GIF 问题的原因进行更多研究。