Question

我在Bootstrap列中有一个输入，如下所示：

<div class="col-lg-2">
    <input />
</div>

我需要在输入旁边添加少量文本，并且我希望输入填充文本后面的列中的剩余空间。

我写过：

<div class="col-lg-2">
    Hello <input />
</div>

当输入被碰到下一列时，这会完全打破页面布局。

如何才能使文字“Hello”出现在列的开头，输入填充剩余的空格而不会溢出到下一列？

Answer 1

有几种不同的方式。例如，在Bootstap 4中，您可以将d-flex用于display:flex。

<div class="col-2 d-flex">
      Hello <input />
</div>

在旧的3.x中，你会这样做：

<form class="form-inline">
      Hello <input />
</form>