jquery-mobile - jquery mobile js include 覆盖 Bootstrap css - 我该如何修复？

Question

我正在开发一个 Pyramid (python) Web 应用程序，并尝试创建一个响应式设计，可以在桌面大小的浏览器和移动浏览器之间优雅地切换。我想将 Twitter Bootstrap 用于桌面 UI，将 jquery mobile 用于移动 UI。

我的 CSS 是这样的:

@charset "utf-8";

@import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
@import url("css/bootstrap.min.css") (min-width: 481px);

当窗口调整大小时，这实际上似乎在动态切换样式方面效果很好。如果它是一个更大的窗口，它会显示我的桌面 UI 样式，并且一旦它达到“移动”阈值，它就会显示 jquery 移动 UI。甜的。

不过，我的问题似乎出在我的 HTML/mako 模板中。我已将 .js 包含在页面底部。重要的片段是:

[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>

我在桌面 UI 上有带有标签的单选按钮，如下所示:

<label>
                    <input type="radio" name="answer" id="1" value="1"> 1</label>
                <label><input type="radio" name="answer" id="2" value="2"> 2</label>
                <label><input type="radio" name="answer" id="3" value="3"> 3</label>
                <label>
                    <input type="radio" name="answer" id="foo" value="foo">foo
                </label>

当所有 .js 包含都处于事件状态时，实际的单选输入控件不会与标签文本内联；相反，它似乎被设置为一个 block 元素，并出现在屏幕上标签之后的自己的行上。我尝试调整 CSS 以覆盖单选输入样式，但到目前为止我能得到的最好的是将单选类型设置为内联，但它仍然出现在标签之后，而不是之前。

Buuuut，如果我注释掉 jquery mobile .js 包括:

[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>

然后桌面 UI 看起来是正确的。当然，那时我已经失去了我的 jquery 移动 UI。

所以似乎正在发生的事情是 jquery mobile javascript 中的某些东西覆盖了包含的样式，但我不知道是什么或为什么。有没有办法可以强制事情不以更大的分辨率运行 jquery 移动设备？任何帮助或提示？

Answer 1

您可能需要为这些输入字段禁用 jquery mobile:

来自 http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html :

if you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>