Question

我正在尝试在bootstrap 3标头中的用户名旁边插入用户的头像。我很难实现这一目标，而且我不想破解提供商的CSS。有人已经这样做了吗？谢谢你的帮助

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Foo's Bar</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Awesome link</a></li>
                        <li><a href="#">More Awesome link</a></li>
                    </ul>
                        <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="/Chuck">Something <span id ="toto" class="badge" style="@danger">0</span></a>
                        </li>
                        <li>
                            <li><a href="#"><img src="http://placehold.it/30x30"><span class="header-username">Chuck Norris</span></a></li>
                        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                    </ul>

                </div>

            </div>
        </div>

编辑：Bootply的链接，因为那是朋友们的所作所为！ http://www.bootply.com/X4FhzJiP3T

Answer 1

头像出现在用户名旁边。如果您遇到了正在体验的样式或展示位置问题，只需将自定义类添加到头像图像并相应地设置样式

.avatar {
    /* put custom avatar css here */
}

我还将.img-responsive课程添加到了头像......

<li>
    <a href="#">
        <img src="http://placehold.it/30x30" class="avatar img-responsive">
        <span class="header-username">Chuck Norris</span>
    </a>
</li>

使用twitter bootstrap

1 个答案: