Twitter bootstrap Bootstrap 4 split inputfield是否可以形成输入以节省狭窄设备上的宽度

我的webapp目前有许多包含表单的页面，其中有许多输入，如下面的一个

请注意，代码使用table/tr/td，最初输入字段始终位于输入字段的右侧，因为前两个选项仍然如此。然而，我改变了组合字段宽度较宽的输入，试图避免平板电脑/手机设备上的水平滚动。理想情况下，如果有足够的空间（例如在计算机上）避免不必要的垂直滚动，我希望它位于右侧，但如果空间不够，则在下方缩进，因为最好是垂直滚动而不是水平滚动

这是我转向Bootstrap尝试实现这一目标的原因之一。我发现 这与以下几点有关

<div class="input-group">
                    <div class="input-group-prepend">
                        <label class="input-group-text" id="selectfolderaddon">
                            Selected Folder 
                        </label>
                    </div>
                    <div aria-describedby="selectfolderaddon">
                        <input type="text" name="folder" id="folder" class="form-control" value="C:\Users\Paul\Music\AKO">
                    </div>
                </div>

选定文件夹

当有足够的空间时，它将是左/右，但当没有足够的空间时，它将位于彼此下方，如下面两个屏幕截图所示

像这样

这很好，但是如果输入字段在放到下一行时在左手边缩进一点会更好，这可能吗

然后我尝试了一个Select，但这不会分离，这是我的代码、引导代码中的错误还是故意的

---

正如您所猜测的，这是代码中的一个bug。

输入组的结构非常严格。。。您的输入元素不能包装在您正在使用的
中；它会干扰引导的结构

如果我们只是删除包装器元素并将
aria descripeby=“selectfolderaddon”
应用于实际输入字段，那么
input group
组件将按预期运行



选定文件夹
我现在可以看到这个bug了，但实际上，当它变窄时，我很高兴它被包装起来，这就是我想要它做的！我关心的问题是selectbox没有包装。使用修复程序时，它仍然会自动换行，但只有在没有空间用于输入的情况下才会自动换行-因此我认为不可能使它自动换行，然后识别。我无法对您的
问题发表评论，因为您没有显示该代码。如果希望输入字段不占用100%的可用空间，可以从其类定义中删除
表单控件
。您可能需要在其位置添加填充实用程序类，否则文本将显示在边缘附近。忘记选择关键问题是设备宽度太小时是否将其包裹好我正在标记正确，因为您发现了一个错误，尽管这不完全是我的问题。您的问题的简短部分是“否”<代码>输入组

将这些元素绑定在一起，而不管在某些断点折叠它们是否更方便。这是以这种方式处理标签而不是使用

col-form-label

和列大小的权衡。