求助一个 bootstrap 问题

[hello2060]

有三个 form, 想把他们放在一行，用了 inline-block, 结果还是有的跑到下一行去了

效果看起来这样
https://imgur.com/a/97Zp00w

code 在这里，

https://gist.github.com/hxuanyu/045e7d81cc7c8aa4115991c711c7d18d  显示 Gist 代码 

谢谢

[SilentDepth]

因为太宽了啊，一行放不下自然就折行了。

Flexbox 解君愁。

[hello2060]

@SilentDepth 我不懂前端哦，问题有点傻你别介意，第一个 form 里面一个 input text, 第二个两个 input text, 他为啥不自动把他们缩小到能一行放下呢

[BryceGu]

设定下宽度 width 33.3 或者用 bootstrap 的珊格布局

[SilentDepth]

inline-block 只是不主动消费剩余水平空间了，本身没有「利用尽可能少的空间」的义务。你的第二个 <form> 里都是行内元素，依规则各自在水平轴上找位置，能不换行就不换行（因为你没限制父容器的宽度，width: auto 不算限制）。于是第二个 <form> 就被其中的元素一步步吃满整个 container 的宽度（没再继续变宽是因为 container 明确了宽度）。

<input> 元素不自动缩小宽度的原因跟 Inline-block 类似（没有那个义务）。以及空 <input> 有自己的默认宽度（大约 20 个字符宽）。综合算下来第二个 <form> 就把另外两个 <form> 挤到单独的行上了。

想实现你预期的效果有 3 个办法：

1. 明确相关元素的宽度（需要结合 container 宽度进行计算，需要注意 container 的宽度是不固定的）
2. 让第二个 <form> 里的元素垂直排列（ display 也行，各自套到 <div> 里也行）
3. 用 Flexbox （推荐这么做，如果你不需要兼容旧版 IE 的话）

[lbyo]

看看这个，应该可以满足你的需求
https://getbootstrap.com/docs/4.4/layout/grid/