web-dev-qa-db-ja.com

Bootstrap navbarの3つのプロフィール画像

Navbarを歪めずに25/30ピクセルのプロファイル画像（画像を参照）を取得するにはどうすればよいですか？

これは私が今持っているものです：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <img src="http://placehold.it/18x18" class="profile-image img-circle"> Username <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
    </ul>
</li>

これが結果です：

small image but no distortion

しかし、画像のサイズを30x30に変更すると、これが起こります。どうすればナビゲーションバーの歪みを防ぐことができますか。

large image but a distorted navbar

画像のマージンとパディングをクリアしようとしましたが、効果はありませんでした。

更新：現在のコードの JSFiddle です。

htmlcssimagetwitter-bootstrap
18
Martijn Thomas

Kooki3が言​​ったことにほぼ沿ってそれを手に入れました。Bootstrapスタイルシートにはさらに特定性があるので、.profile-imageから.navbar-nav>li>a.profile-image

このようにフィドルを編集すると、ナビゲーションは私にぴったりです。

.navbar-nav>li>a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}
11
jme11

jSFiddleを確認したところ、問題はパディングの代わりに使用する画像の高さに起因していることがわかりました。

画像にクラスを与え、左にフロートさせてから、position：relativeを使用して位置を微調整します。

<li class="dropdown">
    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
        <img src="http://placehold.it/30x30" class="img-circle special-img"> Test <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
                </ul>
</li>

-

.special-img 
{
    position: relative;
    top: -5px;
    float: left;
    left: -5px;
}

My Fiddleここ

16
Kooki3