Trình đơn thả xuống căn giữa bằng cách sử dụng Bootstrap

Question

Tôi đang cố gắng căn giữa menu thả xuống của mình trong Bootstap.

<ul class="dropdown-menu"> 

Nó kéo sang trái theo mặc định, hoặc tôi có thể sử dụng pull-right quy định như sau để làm cho nó đi về phía bên phải:

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

Tôi muốn căn giữa mặc dù. Tôi mới làm quen với Boostrap và không thể tìm ra cách tập trung vào nó. Có lời khuyên nào không? Tôi đã cố gắng đúng: 50% nhưng điều đó không hiệu quả.

Lưu ý: Tôi không tìm cách căn giữa văn bản thực tế trong trình đơn thả xuống. Tôi đang tìm cách căn giữa menu thả xuống thực tế và carret bên dưới mục menu điều hướng mà nó rơi xuống.

Dưới đây là đoạn mã đầy đủ của tôi trong mẫu của tôi:

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

Answer 1

Bạn có thể thêm vào dưới đây như CSS và cung cấp cho lớp này trong thẻ như hình dưới đây .

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

Trong HTML Code,

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

Answer 2

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

này làm việc cho tôi khi sử dụng mặc định bootstrap trình đơn thả xuống. Chỉ cần điều chỉnh lề trái tùy thuộc vào độ rộng của menu.

Answer 3

Phản hồi này hơi muộn, nhưng hy vọng sẽ hữu ích. Để căn giữa menu thả xuống Bootstrap đối với cha mẹ của nó, hãy thử điều này.

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

Điều chỉnh kích thước khi cần, chỉ cần đảm bảo giá trị số (40px trong ví dụ này) khớp với nhau. Ở đây, điều này kéo bên trái và bên phải của menu thả xuống 40px sang trái và 40px bên phải của liên kết gốc/gốc, tương ứng.

BONUS ROUND: Trong trường hợp văn bản của mục danh sách mở rộng rộng hơn menu, hãy xem xét thêm tuyên bố sau.

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