Thanh trượt thả xuống không hoạt động trên thiết bị di động

Question

Tôi đã gặp sự cố với thanh điều hướng trong Bootstrap 3. Một trong các mục trình đơn của tôi là trình đơn thả xuống hoạt động tốt trên máy tính xách tay của tôi nhưng không hoạt động trên điện thoại Android của tôi. Cụ thể không có gì xảy ra khi nhấn vào mục menu thả xuống trên điện thoại của tôi.

Tôi đã tìm kiếm trên google, trang web này và một số cách khác để tìm giải pháp nhưng chưa tìm được giải pháp. Có vẻ là một vài giải pháp/cách giải quyết cho Bootstrap 2, nhưng không có giải pháp nào có vẻ phù hợp với tôi. Tôi biết có một số khác biệt giữa phiên bản 2 và 3, đó có thể là lý do tại sao không có giải pháp nào tôi đã thử làm việc.

Bất kỳ đề xuất hoặc tham chiếu nào tôi có thể xem xét sẽ được đánh giá rất nhiều! Tôi bao gồm mã từ tập tin navbar.php của tôi dưới đây. Để đưa ra ý tưởng về thiết lập của tôi, tôi cũng có một tệp header.php và footer.php. Mỗi trang trên trang web của tôi bao gồm các tệp tiêu đề, thanh điều hướng và chân trang. Vui lòng cho tôi biết nếu có bất kỳ thông tin bổ sung nào có thể hữu ích.

<nav id="navbar" class="navbar navar-default navbar-inverse navbar-fixed-top" role = "naviation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://luckyrabbitdesigns.com/index.php">Lucky Rabbit Designs</a> 
    </div> 
    <div class="collapse navbar-collapse navbarCollapse"> 
     <ul class="nav nav-pills"> 
      <li > 
       <a href="http://luckyrabbitdesigns.com/index.php">Home</a> 
      </li> 
      <!-- <li> 
       <a href="http://luckyrabbitdesigns.com/resume.php">Res</a> 
      </li>--> 
      <li class="dropdown"> 
       <a href="http://luckyrabbitdesigns.com/projects.php" data-target="#" data-toggle="dropdown" class="dropdown-toggle">Projects <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="http://luckyrabbitdesigns.com/projects/designs.php">Designs</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/artwork.php">Art</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/bookreviews.php">Book Reviews</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/photos.php">Photos</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="http://luckyrabbitdesigns.com/contact.php">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Vâng, tôi loại tìm ra vấn đề ... hoặc, đúng hơn, một công việc xung quanh. Thay vì sử dụng 'nav-pills' trong lớp cho thẻ danh sách không theo thứ tự, tôi đã sử dụng 'navbar-nav'. Nó thay đổi phong cách của thanh điều hướng, nhưng ít nhất nó bây giờ hoạt động trên điện thoại di động của tôi. Dưới đây là các mã ...

<nav id="navbar" class="navbar navar-default navbar-inverse navbar-fixed-top" role = "naviation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="http://luckyrabbitdesigns.com/index.php">Lucky Rabbit Designs</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li > 
       <a href="http://luckyrabbitdesigns.com/index.php">Home</a> 
      </li> 
      <!-- <li> 
       <a href="http://luckyrabbitdesigns.com/resume.php">Res</a> 
      </li>--> 
      <li class="dropdown"> 
       <a href="http://luckyrabbitdesigns.com/projects.php" data-toggle="dropdown" class="dropdown-toggle">Projects <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="http://luckyrabbitdesigns.com/projects/designs.php">Designs</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/artwork.php">Art</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/bookreviews.php">Book Reviews</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/photos.php">Photos</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="http://luckyrabbitdesigns.com/contact.php">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

tôi đã cùng một vấn đề với Bootstrap 3.2.0 và thả xuống menu trên điện thoại di động.

Giải Quyết vấn đề của tôi bằng cách thêm này để css-file của tôi:

.dropdown-backdrop { 
    position: static; 
} 

Có lẽ nó giúp. Tôi nhận giải pháp từ this comparable problem with BS 2.3.2

Chỉnh sửa: Và tôi không sử dụng data-target="" trong trình đơn của mình.

Answer 3

Tôi đang làm việc với bootstrap 1.1 mẫu. Tôi được sửa chữa từ diễn đàn git-hub bootstrap, và nó làm việc cho tôi.

Bạn cần phải thêm một dòng mã trong thẻ script trên tài liệu sẵn sàng như:.

$ ('body') trên ('touchstart.dropdown', '.dropdown-menu', function (e) {e.stopPropagation();});

Hãy thử điều này, Chúc bạn may mắn. Cảm ơn.