jquery - 带有 Twitter Bootstrap 的 Google CSE 无法正确显示搜索框

Question

Google 自定义搜索 (CSE) 未正确显示搜索框和按钮。我正在使用 Twitter Bootstrap v3.1.0。

<script>
    (function() {
        var cx = '009077552906670546181:2ufng0dmsos';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:search></gcse:search>

有人可以帮忙吗？

http://jsfiddle.net/nz6rh/

screenshot of the abnormal searchbox

Answer 1

我使用了以下 CSS 来解决 Bootstrap 冲突:

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button {
    box-sizing: content-box; 
    line-height: normal;
}

你可以在这里查看工作示例(我目前使用 Bootstrap 3.2): http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/