การเปิดเมนูแบบเลื่อนลงจากการสร้างแบรนด์แถบนำทาง

ฉันต้องการเปิดเมนูแบบเลื่อนลง (โดยใช้ Twitter Bootstrap) ทุกครั้งที่ฉันคลิกที่แบรนด์ของแถบนำทางของฉัน ดังนั้นฉันจึงลองใช้โค้ดนี้:

<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="/th#menu">
        <div class="brand">Brand</div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li><a href="/th#">Action</a></li>
    </ul>
    </div>
<ul class="nav">
    <li>
        <a href="/th#" data-toggle="tab">Item</a>
    </li>
</ul>
</div>
</div>
</div>

ผลลัพธ์: เมื่อฉันคลิก เมนูจะปรากฏขึ้น แต่ มากกว่า แบรนด์ ไม่ใช่ ต่ำกว่า จะแก้ไขได้อย่างไร?

ตัวอย่าง


person Francesco Frassinelli    schedule 07.09.2012    source แหล่งที่มา


คำตอบ (1)


แบรนด์ของคุณต้องมีองค์ประกอบ .nav li เพื่อให้แสดงผลเมนูแบบเลื่อนลงได้อย่างถูกต้อง ดังนั้นเพียงเพิ่มคลาส .brand ลงในดรอปดาวน์มาตรฐาน

<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="/th#menu">
                        Brand
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a href="/th#">Action</a></li>
                    </ul>
                </li>
                <li>
                    <a href="/th#" data-toggle="tab">Item</a>
                </li>
            </ul>
        </div>
    </div>
</div>

นั่นจะทำให้ตำแหน่งแบรนด์ของคุณพัง แต่คุณแฟน ๆ ก็แก้ไขมันด้วย CSS ง่ายๆ นี้:

.navbar .brand {
    margin-left: 10px; /* This value could be different for another layout */
}
person albertedevigo    schedule 07.09.2012
comment
ขอบคุณ มันได้ผล! คุณรู้ไหมว่าทำไมมันถึงเพิ่มช่องว่างทางด้านซ้าย? - person Francesco Frassinelli; 07.09.2012
comment
ดูเหมือนว่า margin-left: -15px; จะดีกว่า :) ทำให้ข้อความอยู่ในแนวเดียวกับแบรนด์ทั่วไป แต่เมื่อคุณกดมันไม่ค่อยดีนัก (มีเพียง 5px ที่ขอบด้านซ้าย): ฉันควรลองใช้ค่าอื่น :) - person Francesco Frassinelli; 07.09.2012
comment
มันไม่เพิ่ม มันลบ นั่นเป็นเพราะคุณมักจะใส่ .brand ไว้ใน .container ซึ่งมี padding: 20px เป็นค่าเริ่มต้น - person albertedevigo; 07.09.2012
comment
ฉันใช้ jsfiddle นี้ ฉันหวังว่ามันจะช่วยคุณค้นหาคุณค่ามหัศจรรย์ ;) jsfiddle.net/simbirsk/ 4rdPU/5 - person albertedevigo; 07.09.2012
comment
ดูเหมือนว่า margin-left: -20px; text-indent: 5px จะจัดแนวข้อความได้อย่างสมบูรณ์แบบ และเมื่อคุณกดจะไม่มีที่ว่างเหลือ ขอบคุณ :) - person Francesco Frassinelli; 07.09.2012
comment
margin-left: -20px; padding-left: 20px !important; padding-right: 20px !important; ดูเหมือนจะให้ผลลัพธ์ที่ดีที่สุด - person Francesco Frassinelli; 07.09.2012
comment
OMG นี่เริ่มสับสนเล็กน้อย คุณได้ตรวจสอบ jsfiddle ของฉันแล้วหรือยัง? นั่นไม่ใช่เลย์เอาต์ที่คาดหวังใช่ไหม อาจมีองค์ประกอบอื่นรบกวน และเราสามารถหาวิธีแก้ปัญหาง่ายๆ ได้... - person albertedevigo; 07.09.2012
comment
ให้เราสนทนาต่อในการแชท - person Francesco Frassinelli; 07.09.2012