求助一个 bootstrap 问题

• 資深大佬 : 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/