bootstrap表单自适应的问题

Question

接手了一个用bootstrap的后台系统

采用的是在栅格中使用form表单。

当屏幕很宽或者小屏幕上响应成col-xs-12的时候，表单就会拉伸的很长，很难看。

想问的是，表单是否不适合使用栅格系统做自适应呢？

还是表单本身就不适合自适应处理呢？

Answer 1

首先在效率上是适合的；

你可以自己额外添加css代码

@media screen and (max-width: 768px) {
表单长度添加一个max-width
不考虑ie祖宗的话可以用vh单位 }

Answer 2

bootstrap是一个能快速开发的前端库，具体的展示还是需要自己调CSS的。

Answer 3

看错了...
col-xs-12 不会在大屏幕中响应。而在小屏幕中，表单刚好横向撑满，符合一般体验。
你应该说的是在大屏幕中表单撑满屏幕的意思吧？那就使用 col-- 解决大屏幕的问题。

bootstrap 中的 grid 可以组合使用。应该可以达到你想要的效果，例如:

<div class="row">
    <div class="col-md-6 col-sm-12 col-xs-6"></div>
    <div class="col-md-6 col-sm-12 col-xs-6"></div>
</div>

前台和后台想要不同效果，可以动态加载 col-**-** 。

bootstrap官方 https://getbootstrap.com

Answer 4

感觉上你也可以使用一下rem

Answer 5

试试加上class="form-sm"

Answer 6

有没有截图，看看效果？怎么个不美观法了？最好还是自适应，如果不想用栅格系统，那就自己定百分比吧。写死宽度的后果，可能就是当上头要你做自适应的时候，得重写。