Question

简短摘要

使用bootstrap

时，图像会从我的页面中神秘消失

问题

我的游戏时间有点晚了，但我认为这是真正开始学习bootstrap的好时机，所以我启动了较少的版本并开始定制并获得一些主题。

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

The hidden dom element Styles around the image

更新

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

不同

too tall correct height, but buttons are off

这是一个更新的小提琴：的 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问题的原因。

Answer 2

看起来您必须在每个页面的开头使用HTML5文档类型。看看上一个问题，如果有问题请告诉我们。

手指交叉！

Twitter bootstrap - images not showing

Answer 3

我认为父div的高度是造成这种情况的原因虽然我不确定，直到你能提供你的页面的jsfiddle。

尝试将此添加到您的css：

.navbar-brand    {
    height:auto;
}

Answer 4

此Bootply可以作为解决问题的起点。它跟随所有bootstrap rules regarding navbar并且看起来像你的例子（如果我做对了）。

很难详细解释你的代码有什么问题，但是它应该如何使用或者只是一些小错误：

在navbar内，您不应使用row
您的标记ui应为ul

另请注意有关brand image：

的文档

通过交换<img>的文字，将导航栏品牌替换为您自己的图片。由于.navbar-brand有自己的填充和高度，因此您可能需要根据图像覆盖一些CSS。

Bootstrap 3中神秘隐藏的图像

4 个答案: