html - 在 Bootstrap 中，如何将所有元素保持在同一行？

Question

我这里有一个 JSFiddle:

https://jsfiddle.net/t5sbzdxr/

我在<div></div>之间有连续的元素标签，但它们都出现在不同的行上:

相关代码为:

           <div class="col-10 d-inline">
              <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
              <select type="field" class="form-control form-control-sm ml-2" style="width:210px">
                 <option value="each">each </option>
              </select>
              <button type="button" class="btn btn-sm btn-primary ml-auto"> My Button </button>
           </div>

如何让所有元素出现在同一行？

编辑:为了澄清，我对让元素保持对齐(即彼此齐平)不感兴趣。我希望将所有元素放在一行中。

Answer 1

你的问题是，你的选择宽度为210px并且有显示 block (它试图在它的行上)，所以你要么让它display:inline并对它的宽度做一些事情，或者你可以简单地让父div显示flex(首选第一个解决方案)