Membuka menu dropdown dari branding navbar

Saya ingin membuka menu dropdown (menggunakan Twitter Bootstrap) setiap kali saya mengklik merek navbar saya, jadi saya mencoba kode ini:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
    <div class="dropdown">
    <a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="/id#menu">
        <div class="brand">Brand</div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li><a href="/id#">Action</a></li>
    </ul>
    </div>
<ul class="nav">
    <li>
        <a href="/id#" data-toggle="tab">Item</a>
    </li>
</ul>
</div>
</div>
</div>

Hasil: ketika saya mengekliknya, menu muncul, namun di atas merek, bukan di bawah. Bagaimana memperbaikinya?

Contoh


css twitter-bootstrap
person Francesco Frassinelli    schedule 07.09.2012    source sumber

Jawaban (1)


arrow_upward
8
arrow_downward

Untuk merender dropdown dengan benar, merek Anda harus berupa elemen .nav li. Jadi tambahkan saja kelas .brand ke dropdown standar.

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="tabbable">
            <ul class="nav">
                <li class="dropdown">
                    <a id="drop1" class="dropdown-toggle brand" data-toggle="dropdown" href="/id#menu">
                        Brand
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a href="/id#">Action</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/id#" data-toggle="tab">Item</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Itu akan merusak positioning merek Anda, tetapi Anda dapat memperbaikinya dengan CSS sederhana ini:

.navbar .brand {
    margin-left: 10px; /* This value could be different for another layout */
}
person albertedevigo    schedule 07.09.2012
comment
Terima kasih, ini berhasil! Tahukah Anda mengapa ini menambah ruang di sebelah kiri? - person Francesco Frassinelli; 07.09.2012
comment
Tampaknya margin-left: -15px; lebih baik :) Ini membuat teks sejajar seperti merek biasa, tetapi ketika Anda menekannya tidak terlalu bagus (hanya ada 5px di margin kiri): Saya harus mencoba nilai lain :) - person Francesco Frassinelli; 07.09.2012
comment
Tidak menambah, justru mengurangi. Itu karena Anda sering kali memasukkan .brand ke dalam .container, yang memiliki padding: 20px secara default. - person albertedevigo; 07.09.2012
comment
Saya menggunakan jsfiddle ini, saya harap ini akan membantu Anda menemukan nilai ajaibnya ;) jsfiddle.net/simbirsk/ PU ke-4/5 - person albertedevigo; 07.09.2012
comment
Tampaknya margin-left: -20px; text-indent: 5px menyelaraskan teks dengan sempurna dan ketika Anda menekannya tidak ada ruang tersisa. Terima kasih :) - person Francesco Frassinelli; 07.09.2012
comment
margin-left: -20px; padding-left: 20px !important; padding-right: 20px !important; sepertinya memberikan hasil terbaik - person Francesco Frassinelli; 07.09.2012
comment
OMG, ini agak membingungkan. Sudahkah Anda memeriksa jsfiddle saya? Bukankah itu tata letak yang diharapkan? Mungkin ada elemen lain yang mengganggu dan kita dapat menemukan solusi sederhana... - person albertedevigo; 07.09.2012
comment
mari kita melanjutkan diskusi ini dalam obrolan - person Francesco Frassinelli; 07.09.2012