问jquery移动js包括覆盖引导css -如何修复？
EN

Stack Overflow用户

提问于 2012-09-16 12:53:11

回答 1查看 2.3K关注 0票数 2

我正在开发一个金字塔(python)网络应用程序，并试图创建一个响应式的设计，它将优雅地在桌面大小的浏览器和移动浏览器之间切换。我希望在桌面UI中使用Twitter引导程序，对于移动用户界面使用jquery移动工具。

我的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包含都处于活动状态时，实际的无线输入控件不会与标签文本内联；相反，它似乎被设置为块元素，并在标签之后出现在自己的屏幕上。我已经尝试过调整CSS以覆盖无线电输入样式，但是到目前为止，我所能得到的最好的方法是将收音机类型设置为内联，但它仍然出现在标签之后，而不是以前。

如果我评论掉jquery .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移动javascript正在覆盖样式，但我不知道是什么，也不知道为什么。有什么办法可以迫使事情在更大的分辨率下不运行jquery移动设备吗？有什么帮助或暗示吗？

jquery-mobile

twitter-bootstrap

pyramid

回答 1

Stack Overflow用户

发布于 2012-11-02 13:10:15

对于这些输入字段，您可能需要禁用jquery：

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

如果您希望某个特定的表单控件不受jQuery移动的影响，只需给该元素属性数据-角色=“无”。例如：

<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>