Trung tâm menu thả xuống Bootstrap 3 sắp xếp không hoạt động

Question

Tôi không thể căn chỉnh menu thả xuống đến trung tâm của phụ huynh mà trình đơn thả xuống được mở bằng di chuột. Tôi đã cố gắng căn chỉnh văn bản: trung tâm cho toàn bộ phần tử .nav .navbar li và nó không hoạt động. Tôi đã cố gắng thiết lập lề và trái: 50% cho toàn bộ menu ul.dropdown là menu thả xuống và nó không hoạt động. Đây là mã html:

<ul class="nav navbar-nav navbar-right" id="headerDropdowns"> 
         <li><div class="btn-toolbar"> 
          <div class="btn-group"> 
           <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button> 
           <ul class="dropdown-menu"> 
            <li><a tabindex="-1" href="#">Made in the USA</a></li> 
            <li class="divider"></li> 
            <li><a tabindex="-1" href="#">Human Grade</a></li> 
            <li class="divider"></li> 
            <li><a tabindex="-1" href="#">Ingredients Fresh</a></li> 
            <li class="divider"></li> 
            <li><a tabindex="-1" href="#">USDA Meats</a></li> 
            <li class="divider"></li> 
            <li><a tabindex="-1" href="#">Our Story</a></li> 
            <li class="divider"></li> 
            <li><a tabindex="-1" href="#">Campare</a></li> 
           </ul> 
          </div> 
         </li> 
</ul> 

Trong trình đơn thả xuống lớp học hoặc nav nav-nav, tôi có nên làm giấy phép hay không và tôi nên làm gì?

Answer 1

duy nhất, cách xấu xí là để thiết lập vị trí tùy thuộc vào nhu cầu của bạn như:

.dropdown-menu{ 
    right: -25px !important; 
} 

Fiddle

Nhưng thas không phải là cách nó nên được sử dụng. Hãy nhớ rằng bạn phải điều chỉnh cài đặt cho tất cả các thiết bị truyền thông.

Answer 2

Bạn có thể làm điều này miễn là bạn sẵn sàng cung cấp cho thả xuống một chiều rộng cố định. Xem mã bên dưới:

.dropdown{text-align:center;} 
.button, .dropdown-menu{margin:10px auto} 
.dropdown-menu{width:200px; left:50%; margin-left:-100px;} 

Tuyên bố đầu tiên 2 là nhằm mục đích hiển thị, nhưng phần quan trọng là dòng thứ 3. Bạn sẽ cần xác định chiều rộng (trong trường hợp này là 200px) và sau đó là margin-left bằng một nửa chiều rộng. Điều này sẽ làm việc với bất kỳ chiều rộng, không có vấn đề nếu nút là ở bên phải, sang trái hoặc giữa các yếu tố (nhưng tất nhiên có thể bạn sẽ cần một số không gian cho các phần tử button)

Bạn có thể see a fiddle here

Answer 3

Bạn có thể sử dụng chuyển đổi để tránh việc sử dụng độ rộng cố định:

.dropdown-menu { 
    left: 50%; 
    right: auto; 
    text-align: center; 
    transform: translate(-50%, 0); 
} 

trả lời bị ảnh hưởng bởi http://css-tricks.com/centering-percentage-widthheight-elements/