2015-09-02 54 views
0

我正在使用wordpress和我的一些頁面上我想獲得一些不錯的引導表單並且正在運行,但是樣式出現了問題。如果我粘貼我的代碼並在本地嘗試,它一切正常。我認爲樣式表碰撞或什麼?我該如何解決它?Wordpress和bootstrap工作不正常

這裏是我的代碼:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://192.3.88.113/bootstrap-select.css"> 
<style> 
body { 
padding-top: 70px; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="http://192.3.88.113/bootstrap-select.js"></script> 
<form class="form-inline"> 
<div class="form-group"> 
<label class="col-md-1 control-label" for="lunchBegins">Lunch (Begins search):</label> 
</div> 
<div class="form-group"> 
<select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Please select a lunch ..."> 
<option>Hot Dog, Fries and a Soda</option> 
<option>Burger, Shake and a Smile</option> 
<option>Sugar, Spice and all things nice</option> 
<option>Baby Back Ribs</option> 
<option>A really really long option made to illustrate an issue with the live search in an inline form</option> 
</select> 
</div> 
</form> 
</div> 
<script> 
$(document).ready(function() { 
var mySelect = $('#first-disabled2'); 
$('#special').on('click', function() { 
mySelect.find('option:selected').prop('disabled', true); 
mySelect.selectpicker('refresh'); 
}); 
$('#special2').on('click', function() { 
mySelect.find('option:disabled').prop('disabled', false); 
mySelect.selectpicker('refresh'); 
}); 
$('#basic2').selectpicker({ 
liveSearch: true, 
maxOptions: 1 
}); 
}); 
</script> 

應該如何看: enter image description here

它是如何結束了尋找我的wordpress頁:enter image description here

+0

這是因爲JQuery短變量。您需要將每個對JQuery的簡短引用更改爲較長的引用。看到這個:https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/ – ScottMcGready

+0

不幸的是,在閱讀兩次後,我仍然無法使它工作。還有其他解決方案嗎? – Matt

+0

這絕對是因爲jquery short變量。我向你保證。在Wordpress支持上搜索 – ScottMcGready

回答

0

請試試這個,讓我知道,如果這加工。問候。

HTML

<select data-live-search="true" title="Please select a lunch" class="selectpicker show-menu-arrow test"> 
    <option>Hot Dog, Fries and a Soda</option> 
    <option>Burger, Shake and a Smile</option> 
    <option>Sugar, Spice and all things nice</option> 
    <option>Baby Back Ribs</option> 
    <option>A really really long option made to illustrate an issue with the live search in an inline form</option> 
</select> 

JS

$('.selectpicker').selectpicker(); 

DEMO

,如果它不工作我會更新我的答案。