引导程序下拉按钮不起作用

Question

我有一个表单，它使用位于页面中的输入组中的下拉按钮作为聚合物自定义html标记。它在这fiddle，但不是在我的live demo正常工作。

从index.html的：

<video class="background" autoplay loop poster="/static/video/video.jpg"> 
    <source src="/static/video/video.webm" type="video/webm"> 
    <source src="/static/video/video.mp4" type="video/mp4"> 
    <source src="/static/video/video.ogv" type="video/ogv"> 
</video> 
<div class="index-cta"> 
    <div class="row-"> 
     <div class="col-md-4"> 
      <!-- TMPL_VAR instance_name --> 
     </div> 
     <div class="col-md-8"> 
      <h1>Real Estate</h1> 
      <p> 
       <em>you're one click away from thousands of homes</em><br> 
       <a class="btn btn-link btn-outline btn-inverse" href="/leads/buy"><span>Buying a home?</span></a> 
       <a class="btn btn-link btn-outline btn-inverse" href="/leads/sell"><span>Selling a home?</span></a> 
       <a class="btn btn-link btn-outline btn-inverse" href="/leads/cma"><span>What's my home worth?</span></a> 
      </p> 
      <search-form></search-form> 
     </div> 
    </div> 
</div> 

从搜索form.html

<!-- Defines element markup --> 
<dom-module id="search-form"> 
<template> 
    <form id="search" method="get" action="/property/search"> 
    <div class="input-group"> 
     <div class="input-group-btn"> 
      <button id="#search-type" type="button" class="btn primary dropdown-toggle" data-toggle="dropdown"> 
       Search By 
       <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
       <li><a data-name="city" data-label="city">City</a></li> 
       <li><a data-name="zip" data-label="zip">Zip Code</a></li> 
       <li><a data-name="mls" data-label="mls">MLS Number</a></li> 
      </ul> 
     </div> 
     <input id="#input-tag" class="form-control" type="text" name="" value=""> 
     <div class="input-group-btn"> 
      <button type="submit" class="btn"><i class="fa fa-search"></i></button> 
     </div> 
    </div> 
    </form> 
</template> 

<script> 
/******************************** 
/SEARCH TYPE BUTTON 
/*******************************/ 
$(function() { 
    var caret = ' <span class="caret"></span>'; 

    function searchSelect() { 
     $('.dropdown-menu > li > a').on("click", function() { 
      $('#search-type').html($(this).text() + caret); 
      $('#input-tag').attr('placeholder', $(this).data('label')); 
      $('#input-tag').attr('name', $(this).data('name')); 
     }); 
    }searchSelect(); 
}); 

Polymer({ 
     is: 'search-form', 
     created: function() {}, 
     ready: function() {}, 
     attached: function() {}, 
     detached: function() {}, 
     attributeChanged: function(name, type) {} 
}); 
</script> 
</dom-module> 

CSS为所涉及的元素：

.background { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(/static/video/video.jpg) no-repeat; 
    background-size: cover; 
} 

.index-cta { 
    background-color: rgba(255,255,255,.5); 
    display: block; 
    position: absolute; 
    padding: 20px; 
    overflow: visible; 
    width: 100%; 
} 

的jquery：

$(document).ready(function() { 
    $('.index-cta').css("top", (($(window).height() - $('.index-cta').height())/4) - $('footer').height() + "px"); 
    $('.index-cta').css("left", ($(window).width() - $('.index-cta').width())/ + "px"); 
}); 

因为我可以创建一个工作演示，但是当放在网站的其他部分，如果失败，我完全被破坏了。

Answer 1

您的下拉工作。问题在于一些CSS样式正在覆盖引导程序下拉列表的默认CSS样式因为您正在使用LESS，我无法找到该文件。 所以只提供要删除的样式的屏幕截图。

Answer 2

尝试移动jQuery &在webcomponents.min.js之前的引导脚本。

见webcomponents.js问题＃130，here