Wordpress 和引导程序无法正常工作答案

【问题标题】：Wordpress and bootstrap not properly workingWordpress 和引导程序无法正常工作
【发布时间】：2015-09-02 11:13:14
【问题描述】：

我正在使用 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>

它的外观：

它在我的 wordpress 页面上的结果如何：

【问题讨论】：

这是因为 JQuery 短变量。您需要将对 JQuery 的每个短引用更改为长引用。看到这个：digwp.com/2011/09/using-instead-of-jquery-in-wordpress
不幸的是，读了两遍之后，我仍然无法让它工作。还有其他解决办法吗？
这绝对是因为 jquery 短变量。我向你保证。在 Wordpress 支持中搜索它
好的，我让它工作了，但现在它弄乱了我在页面上的主题
可能是因为 css 样式被覆盖或类似。如果它适用于 wordpress 提供的默认主题（检查它是否适用），请尝试修复您的主题以使其正常工作。 Bootstrap 通常并不总是与 wordpress 100% 兼容

标签： html wordpress twitter-bootstrap

【解决方案1】：

请试试这个，让我知道这是否有效。问候。

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>

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

DEMO

如果它不起作用，我会更新我的答案。

【讨论】：