Html 为什么CSS布局在小型设备上看起来如此糟糕？

我正在开发一个网站，用户可以在其中搜索客户。部分搜索允许他们按国家、州或城市进行筛选。为了平衡大设备上的灵活性和小设备上的整洁UI，我添加了四个输入控件，一个用于国家、州和地区，全部显示在大设备上，一个用于小设备上显示位置的组合控件

这一切都是使用Visual Studio 2013中启动新MVC项目时提供的标准内容。HTML看起来像这样

<div class="form-inline form-group" id="filterGroup">
<span style="white-space: nowrap"><label for="namefilter">Name:</label>&nbsp;<input id="namefilter" type="text" class="form-control k-input k-textbox" /></span>
<span style="white-space: nowrap"><label for="locationfilter" class="visible-xs">Location:</label>&nbsp;<input id="locationfilter" type="text" class="form-control k-input k-textbox visible-xs" /></span>
<span style="white-space: nowrap"><label for="countryfilter" class="hidden-xs">Country:</label>&nbsp;<input id="countryfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="regionfilter" class="hidden-xs">State:</label>&nbsp;<input id="regionfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="cityfilter" class="hidden-xs">City:</label>&nbsp;<input id="cityfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><button id="filterBtn" class="btn btn-primary btn-sm">Filter</button>&nbsp;<button id="clearBtn" class="btn btn-primary btn-sm">Clear</button></span>
</div>

现在，当你在一个大设备上查看时，它看起来很好。。。

请注意，HTML显示在KendoUI网格的工具栏部分中，但这与问题无关，因为如果我将其直接放在文档主体中，问题完全相同

但是，如果您在小型设备上查看它，或者只是使浏览器窗口变窄，它看起来很差。。。

位置文本框与标签在一条单独的线上，而标签不应该在这条线上，因为它们都被包装在一个跨度中，空白设置为nowrap，位置文本框上方有一个很大的空白，两个按钮被按下到另一条线上。所有这些都应该放在一条线上，但看起来很难看，占用了太多的空间

---

知道我做错了什么吗？我希望将名称和位置控件放在一行上，最好同时使用按钮。

如果您希望使用BootStrap3进行正确的响应布局，则应使用12网格系统

在表单中，使用and或任何适合您的大小，以便正确格式化表单

更具体地说，这里有一个格式正确的示例

---

更多信息：

如何将.form内联放到引导程序中？我不确定您的确切意思，但我尝试了几种方法，但没有任何区别。请你再解释一下。THX使元素保持内联。不过你应该再加上bootstrap.col类就让孩子们保持一个啊，我明白你的意思了。问题是这些控件将进入KendoUI网格的工具栏部分，而不会使用引导网格系统。实际上，我在这一页上根本没有使用网格系统，我只是允许网格占据尽可能多的宽度。还有其他想法吗？THX您可以添加显示：内联；或显示：内联块；到每个跨度。否则，您可能想在cssThanks中使用@media querys查看建议，但我实际上将这些控件放在KendoUI网格的工具栏中，因此它们无论如何都不会是网格系统的一部分。有没有一种方法可以在没有引导网格的情况下实现我想要的功能？ThxAre你还在使用引导样式而不是网格，还是你想要一些完全独立于引导的自定义CSS？我正在使用引导的东西，因为这给了我可见性。我不介意自定义CSS，只要它有效！正如@gerdi所建议的，您最好的选择是查看@media查询，并在您的样式中使用它们来定义每种屏幕大小的特定样式。你可以在这里找到一些很好的信息是的，结果是这样的。请看我的评论。谢谢你的帮助