如何在移动设备上的网页上保持所有元素的顺序？
How do I keep all my elements in order on a webpage on a mobile device?
这是我的网站：
maitxhomes.com/main.html
它在桌面浏览器上看起来很棒（我希望如此），但是当我在我的 phone 上拉起它时，蓝色部分的内容只是在一个一直向下延伸的大栏中，同样事情发生在我的页脚内容上。我不确定这是否与我的 HTML 代码中的 <ul> 或 CSS 有关？我可以添加一个@media 查询来解决这个问题吗？
删除 .container 上设置 width 的规则。同时从 tri-section 中删除设置 height.
的规则
从 line 3 中删除：
.container {
width: 960px
}
和line 189：
.tri-section {
height: 130px;
}
通过写入明确的 height 和 width 值，您会使这些元素 无响应。
我已经解决了您的具体问题，只是为了对我的回答做一点补充，但是如果您在所有人都希望用户通过非桌面大小的屏幕与您的网站进行交互。
采用桌面优先方法，您可能会 运行 解决更多问题。
为了在各种设备（如移动设备phone、平板电脑、台式机等）上设计响应式布局，您 link bootstrap 相应地向您的网站提交文件，即如果您想要您使用“.col-md”或 "col-lg" class.
的桌面网站
但是如果您想在移动设备等小型设备上正确显示您的网站 phone...您应该添加 'col-xs' class.
例如：
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4">content 1</div>
<div calss="col-xs-9 col-sm-8">Main content</div>
</div>
</div>
我想，这应该可以解决您面临的问题。
了解更多信息：
通过以下 link
这是我的网站：
maitxhomes.com/main.html
它在桌面浏览器上看起来很棒（我希望如此），但是当我在我的 phone 上拉起它时，蓝色部分的内容只是在一个一直向下延伸的大栏中，同样事情发生在我的页脚内容上。我不确定这是否与我的 HTML 代码中的 <ul> 或 CSS 有关？我可以添加一个@media 查询来解决这个问题吗？
删除 .container 上设置 width 的规则。同时从 tri-section 中删除设置 height.
从 line 3 中删除：
.container {
width: 960px
}
和line 189：
.tri-section {
height: 130px;
}
通过写入明确的 height 和 width 值，您会使这些元素 无响应。
我已经解决了您的具体问题，只是为了对我的回答做一点补充，但是如果您在所有人都希望用户通过非桌面大小的屏幕与您的网站进行交互。
采用桌面优先方法，您可能会 运行 解决更多问题。
为了在各种设备（如移动设备phone、平板电脑、台式机等）上设计响应式布局，您 link bootstrap 相应地向您的网站提交文件，即如果您想要您使用“.col-md”或 "col-lg" class.
的桌面网站但是如果您想在移动设备等小型设备上正确显示您的网站 phone...您应该添加 'col-xs' class.
例如：
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-4">content 1</div>
<div calss="col-xs-9 col-sm-8">Main content</div>
</div>
</div>
我想，这应该可以解决您面临的问题。
了解更多信息： 通过以下 link