<分区>
这是我的网站:
maitxhomes.com/main.html
它在桌面浏览器上看起来很棒(我希望如此)，但是当我在手机上拉起它时，蓝色部分的内容只是在一个一直向下延伸的大栏中，同样的事情也发生在我的页脚内容上.我不确定这是否与 <ul> 有关在我的 HTML 代码或 CSS 中？我可以添加一个@media 查询来解决这个问题吗？
最佳答案
为了在各种设备(如手机、平板电脑、台式机等)上设计响应式布局，您可以将 Bootstrap 文件相应地链接到您的网站，即如果您希望您的网站用于台式机，请使用“.col-md”或“col- lg"类。
但是如果你想在手机等小型设备上正确显示你的网站......你应该添加'col-xs'类。
例如:
<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>
我认为，这应该可以解决您面临的问题。
更多信息: 通过以下链接
关于html - 如何在移动设备上的网页上保持所有元素的顺序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34488264/
相关文章：
javascript - 带有滚动条的 jQuery Nice Select
javascript - 使用 Bootstrap 轮播 slider 的高度困难
javascript bootstrap-multiselect 在按钮单击时获取所有选定的值
html - 如何使用 col-sm-3 在 Bootstrap 中向网格的左侧和右侧添加填充，而不在网格框之间添加填充
html - 带有 wp_bootstrap_navwalker float 问题的 Bootstrap 菜单
javascript - jQuery 与 document.querySelectorAll