使用引導程序居中下拉菜單

我試圖將Bootstap中的下拉菜單居中。使用引導程序居中下拉菜單

<ul class="dropdown-menu">

它拉向左側默認情況下，我也可以用pull-right定義如下讓它往右走：

.dropdown-menu.pull-right { 
    right: 0; 
    left: auto; 
}

我想，雖然居中。我是Boostrap的新手，無法弄清楚如何居中。有小費嗎？我試過了：50％，但沒有奏效。

注意：我不想將下拉菜單中的實際文字居中。我正在尋找將實際的下拉菜單和carret置於其下降的導航菜單項下。

這裏是我的模板我完整的代碼片段：

<ul class="nav"> 
    <li id="tab_profile"> 
     <a href="{% url profile_detail user.username %}">{% trans "PROFILE" %}</a> 
    </li> 
    <li id="product_data"> 
     <a href="{% url all_models %}">{% trans "PRODUCT DATA" %}</a> 
    </li> 
    <li id="product_library"> 
     <a href="{% url library %}">{% trans "LIBRARY" %}</a> 
    </li> 
    <li id="database"> 
     <a href="/DATABASE/">{% trans "DATABASE" %}</a> 
    </li> 
     <li class="dropdown" id = "community"> 
     <a class="dropdown-toggle" href="#">COMMUNITY</a> 
      <ul class="dropdown-menu pull-right"> 
       <li> <a href="/profiles">Search</a></li> 
       <li><a href="https://stackoverflow.com/questions/">Questions and Answers</a></li> 
       <li><a href="{% url view_requests %}">Requests</a></li> 
       </ul> 
     </li> 
</ul>

CSS：

.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 4px 0; 
    margin: 1px 0 0; 
    list-style: none; 
    background-color: #ffffff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
} 
.dropdown-menu.pull-right { 
    margin-right: auto; 
    margin-left: auto; 
}

enter image description here

來源

2012-11-25 user1328021

您可以爲CSS下面添加和給這個類的標籤，如下圖所示。

.centerDropdown { 
    left: auto !important; 
    right: -25% !important; 
} 
.centerDropdown:after { 
    left: auto !important; 
    right: 45% !important; 
}

在HTML代碼，

<li class="dropdown"> 
    <a href="/channel/list" data-toggle="dropdown" class="dropdown-toggle"> 
     <i class="icon-th-list"></i> 
      Lists 
    </a> 
    <ul class="dropdown-menu centerDropdown"> 
      <li><a href="/list">Find a list</a></li> 
      <li><a href="/my">My lists</a></li> 
      <li><a href="/create">Create a list</a></li> 
    </ul> 
</li>

來源

2014-02-18 09:37:09

我很好奇你對該代碼段的父元素有什麼樣的定位？我嘗試在plunker中：http://plnkr.co/edit/i83GXoup85dLpIWcKUQJ沒有成功... – plong0

.dropdown-menu { 
    left: 50% !important; 
    margin-left: -70px; 
}

這使用缺省引導下拉菜單時爲我工作。取決於菜單的寬度，只需調整餘量即可。

來源

2015-08-17 02:26:39

不會使用px值會使它只適用於特定大小的下拉菜單嗎？ – plong0

這個迴應有點遲，但希望會有用。要將一個Bootstrap下拉菜單與其父項集中起來，請嘗試此操作。

.dropdown-menu { 
    left: -40px; 
    right: -40px; 
}

根據需要調整大小，只需確保數值（在本例中爲40px）彼此匹配即可。在此，分別將下拉菜單40px的左側和右側拉到父母/始發鏈接的左側和40px的右側。

BONUS ROUND：如果列表項的文本比菜單延伸的更寬，請考慮添加以下聲明。

.dropdown-menu>li>a { 
    white-space: normal; 
}

來源

2016-03-18 02:50:20

使用引導程序居中下拉菜單

回答

相關問題