Anzeige ein Benutzer Bild oder avatar im header mit twitter bootstrap

Ich versuche, legen Sie die Benutzer-avatar neben dem Benutzernamen in der bootstrap-3-header. Ich bin eine sehr harte Zeit, dies zu erreichen, und ich möchte nicht hacken des Anbieters css. Einer hat dies bereits getan ? Vielen Dank für Ihre Hilfe

<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>

Edit : die Bootply link, weil das ist, was Freunde tun ! http://www.bootply.com/X4FhzJiP3T

Was genau ist das problem? Der avatar erscheint auf der linken Seite der name.

InformationsquelleAutor lxnt | 2015-07-25

  1. 1

    Dem avatar erscheint neben dem Benutzernamen. Wenn es ein styling-oder placement-Problem bei Ihnen auftreten, fügen Sie einfach eine benutzerdefinierte Klasse, um das avatar-Bild und den Stil entsprechend 

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

    Habe ich auch noch die .img-responsive Klasse zum avatar...

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

    InformationsquelleAutor timgavin

Schreibe einen Kommentar