html - CSS - 如何在输入文本旁边制作按钮？

Question

我想在输入文本旁边放置按钮

※ 示例[输入文本][按钮]

并且按钮大小应该是固定的。

• 即使窗口大小发生变化，按钮大小也应该固定，并且应该位于输入文本旁边。

下面是我的代码。

<div class="form-group row">
    <div class="col-sm-2">
        <label>...</label>
    </div>
    <div class="col-sm-8">
        <input type="text">
    </div>
    <div class="col-sm-2">
        <button type="button"></button>
    </div>
</div>

此代码使按钮在窗口较小时移动。并且还使按钮变小，以便无法看到按钮内的值。

我想知道如何按预期进行编码。

Answer 1

如果您想要移动设备的布局，您可以使用 col-xs-2 col-xs-8 col-xs-2(如果您使用的是 bootstrap 3)如果您使用的是 bootstrap 4，则只能使用 col-2第 8 列第 2 列。但是，如果您的屏幕尺寸很小，网格会根据您的屏幕尺寸使您的按钮变小。