JQuery移动元素不会从纵向模式回流到横向模式_Jquery_Css_Jquery Mobile_Responsive Design_Media Queries

JQuery移动元素不会从纵向模式回流到横向模式

jquery css jquery-mobile responsive-design

JQuery移动元素不会从纵向模式回流到横向模式,jquery,css,jquery-mobile,responsive-design,media-queries,Jquery,Css,Jquery Mobile,Responsive Design,Media Queries,我有一个简单的用例，我正在为客户创建一个表单来更新他们的个人资料信息。我正在使用jquerymobile。所以我有几个字段，比如电子邮件电话号码。唯一的问题是，我的电话号码被分为三个字段：代码、区号和号码。我使用Jquery移动网格创建了3个文本字段来捕获每个项目，唯一的问题是当我从设备的纵向模式切换到横向模式时，元素不会回流。从下面的屏幕截图可以看出，电话号码字段不像电子邮件和标题字段那样回流。请参阅附加的屏幕截图。这方面的源代码是 <div data-role="page

我有一个简单的用例，我正在为客户创建一个表单来更新他们的个人资料信息。我正在使用jquerymobile。所以我有几个字段，比如电子邮件电话号码。唯一的问题是，我的电话号码被分为三个字段：代码、区号和号码。我使用Jquery移动网格创建了3个文本字段来捕获每个项目，唯一的问题是当我从设备的纵向模式切换到横向模式时，元素不会回流。从下面的屏幕截图可以看出，电话号码字段不像电子邮件和标题字段那样回流。请参阅附加的屏幕截图。

这方面的源代码是

<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
         <h3>
            Header
        </h3>

        <div data-role="fieldcontain">
            <label>Telephone number</label>
            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <input name="" id="textinput4" placeholder="area code" value="" type="text">
                </div>
                <div class="ui-block-b">
                    <input name="" id="textinput5" placeholder="c code" value="" type="text">
                </div>
                <div class="ui-block-c">
                    <input name="" id="textinput6" placeholder="number" value="" type="text">
                </div>
            </div>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput1">Email</label>
            <input name="" id="textinput1" placeholder="" value="" type="email">
        </div>
        <div data-role="fieldcontain">
            <label for="textinput8">Title</label>
            <input name="" id="textinput8" placeholder="" value="" type="text">
        </div>
    </div>
    <div data-role="content"></div>
    <div data-theme="a" data-role="footer" data-position="fixed">
         <h3>
            Footer
        </h3>

    </div>
</div>


标题
电话号码
电子邮件
标题
页脚

这方面的JS fiddle链接是

非常感谢你的帮助。

很抱歉，如果您无法看到屏幕截图，只需在小提琴上展开并折叠输出，您就会明白我的意思。

您必须添加jquery mobile所需的元标记，以使其响应迅速且整洁

  <!DOCTYPE html> 
  <html> 
  <head> 
<title>My Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

  </head>


我的页面

将其添加到html的顶部。具有设备宽度和初始规模的元标记更为重要

----编辑-----

您需要在fieldcontain div之前关闭标题，然后像这样启动data role=“content”div

在ui-grid-b之后添加类“ui-responsive”。这将使所有这些文本元素堆叠在一起

Hi manu，感谢您的输入，但这已经添加了，但仍然不起作用。我已经对其进行了编辑[租赁检查。你没有关闭标题div，这就是问题的原因。请检查更新的fiddleHi Manu，我想你还没有理解我的要求，让我们取两个字段：电话号码和电子邮件。当我缩小页面大小时，电子邮件标签位于文本字段上方。当我增加宽度时，电子邮件和文本字段为are在同一行上。电话字段不会出现这种情况，电话标签始终保持在3个文本字段的顶部，即基本上是一种响应性设计，其中表单元素是标签，根据视口的宽度回流。如果您删除

，则它们会像应该的那样回流，而CSS调整很少。