jQuery и Twitter Bootstrap - Dropdown get split

Я использую раскрывающуюся функцию в своем навигаторе, используя Twitter Bootstrap и JQuery Mobile. Я создал 5-элементную навигационную панель с помощью jQuery Mobile и ссылался на раскрывающийся список из Twitter Bootstrap. К сожалению, я не могу заставить 5 выпадающих элементов упасть. Вместо этого они разбиваются на 5 частей, когда он приходит к последнему столбцу, который должен быть выпадающим. Любая помощь с этим будет оценена по достоинству. Заранее спасибо.jQuery и Twitter Bootstrap - Dropdown get split

<body> 
<div data-role="navbar" data-grid="d" data-iconpos="bottom"> 
     <ul> 
      <li><a href="#" class="ui-btn-active" data-icon="star">Class</a></li> 
      <li><a href="#" data-icon="star">Activity</a></li> 
      <li><a href="#" data-icon="star">Ratings</a></li> 
      <li><a href="#" data-icon="star">Reports</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div><!-- /navbar --> 
</body>

источник

2014-06-26 ValarMorghulis

Вот ссылка на полную страницу, чтобы вы могли скопировать ее и запустить без необходимости включать таблицы стилей и js отдельно. http://pastebin.com/CNRX4zMv – ValarMorghulis

Возможно, стиль jQuery Mobile navbar переопределяет стили выпадающего списка Bootstrap? –

@KhalidT: Если я выбираю один над другим, я потеряю некоторые функции. Однако я предпочитаю jQuery. – ValarMorghulis

Может быть, это нравится: Demo или Full Screen

КОД:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" 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="#">Website</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#" class="ui-btn-active" data-icon="star">Class</a></li> 
        <li><a href="#" data-icon="star">Activity</a></li> 
        <li><a href="#" data-icon="star">Ratings</a></li> 
        <li><a href="#" data-icon="star">Reports</a></li> 
        <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li><a href="#">Separated link</a></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
        </li> 
       </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

Если вы новичок использование this руководство

источник

2014-06-26 11:20:49 user3599534

Спасибо за быстрый ответ. Но у меня есть два вопроса. Одно из них заключается в том, что значок не работает, а другой - то, что, когда он реагирует на jsfiddle, он не реагирует на мои. Я обновлю статус после удаления всего кода и начну с нуля. Недолго. – ValarMorghulis

Посмотрите эти [примеры] (http://getbootstrap.com/getting-started/#examples) после открытия, просмотрите их souce _ (CTRL + U) _, затем сравните их с вашим кодом, надейтесь, что он решит вашу проблему. – user3599534

Благодарю. Я вижу, что вы использовали Bootstrap для этого. Можно ли это сделать с помощью jQuery Mobile? – ValarMorghulis

jQuery и Twitter Bootstrap - Dropdown get split

ответ

Смежные вопросы