Question

我正在使用Pyramid（python）Web应用程序，并尝试创建一个响应式设计，可以在桌面大小的浏览器和移动浏览器之间进行优雅切换。我想在桌面用户界面上使用Twitter Bootstrap，为移动用户界面使用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样式，并且一旦它到达＆＃34; mobile＆＃34;阈值它显示了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>

我在桌面用户界面上有带标签的单选按钮，如下所示：

<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以覆盖无线电输入样式，但到目前为止我能得到的最好的是将无线电类型设置为内联，但它仍然出现在标签之后，而不是之前。

Buuuut，如果我评论jquery mobile .js包括：

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

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

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

Answer 1

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

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

如果您希望jQuery Mobile不接触特定的表单控件，只需为该元素赋予属性data-role =“none”。例如：

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

jquery mobile js include是覆盖bootstrap css - 我该如何解决？

1 个答案: