如何在移动设备的网页上保留所有元素？

Question

这是我的网站：

maitxhomes.com/main.html

在桌面浏览器上看起来很棒（我希望如此），但是当我在手机上启动它时，蓝色部分的内容只是在一个大的列中，一直向下延伸，同样的事情发生了与我的页脚的内容。我不确定这是否与我的HTML代码中的<ul>或CSS有关？我可以添加一个@media查询来解决这个问题吗？

Answer 1

删除设置.container的{​​{1}}上的规则。同时从width中删除设置tri-section。

的规则

从height：

中删除

line 3

.container { width: 960px } ：

line 189

通过撰写明确的.tri-section { height: 130px; } 和height值，您可以使这些元素无响应。

为了补充一点我的答案，我已经解决了您的具体问题，但如果您完全期望用户，您应该考虑使用a mobile first方法开发网站从非桌面大小的屏幕与您的网站进行互动。

使用桌面第一种方法可能会遇到更多问题。

Answer 2

为了设计响应各种设备（如手机，平板电脑，台式机等）的布局，您可以将bootstrap文件依次链接到您的网站，即如果您希望自己的网站用于桌面，请使用＆＃34; .col-md＆＃34 ;或＆＃34; col-lg＆＃34;类。

但是如果你想在手机等小型设备上正确显示你的网站......你应该添加＆＃39; col-xs＆＃39;类。

代表：

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

我认为，这应该可以解决你所面临的问题。

了解更多信息： 请浏览以下链接

Bootstrap Grid Options