Question

我的网络应用程序目前有许多页面，其中包含许多输入的表单，如下面的

请注意，代码使用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>

当有足够的空间时，它会左/右，但是当下面两个屏幕截图显示没有足够的空间时，它会低于对方。

喜欢这个

这很好，但如果输入字段在下降到下一行时会在左侧缩进一点会更好，这可能吗？

然后我尝试使用选择，但这不会拆分，是我的代码中的错误，Bootstrap代码还是有意的

Answer 1

正如您所推测的那样，您的代码中存在错误。 input-group的结构非常严格......您的输入元素无法包含在您使用的<div>中;它干扰了Bootstrap的结构。

如果我们只是删除您的包装元素并将aria-describedby="selectfolderaddon"应用于实际输入字段，input-group组件将按预期运行。

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-prepend">
    <label class="input-group-text" id="selectfolderaddon">Selected Folder </label>
  </div>

  <input type="text" name="folder" id="folder" class="form-control" value="C:\Users\Paul\Music\AKO" aria-describedby="selectfolderaddon">
</div>

＆＃13;

在上面的代码段中，input-group-prepend将始终显示在左侧，form-control增强型<input>将缩小以适应剩余的可用空间。增加奖金;您还原两个项目连接的UI / UX功能。使用包装器添加Bootstrap <input> CSS的默认圆角边缘正在所有边界上应用。

Bootstrap 4分割输入字段输入可以在窄设备上保存宽度

1 个答案: