Wordpress和bootstrap无法正常工作

时间:2015-09-02 00:36:20

标签: html wordpress twitter-bootstrap

我正在使用wordpress,在我的一些页面上,我希望得到一些不错的引导程序,但风格会变得混乱。如果我粘贴我的代码并在本地尝试它一切正常。我认为样式表是碰撞的还是什么?我该如何解决?

这是我的代码:

<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

1 个答案:

答案 0 :(得分: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

如果不能正常工作,我会更新我的答案。