Question

我正在尝试创建一个看起来像Bootstrap的输入组的东西，右边是附加的按钮。

我最初使用的是他们的控件，但是当按钮标签变大时，我需要让按钮增长到 LEFT 而不是正常按钮。

例如，如果按钮在点击后显示“go”，则需要说“处理您的数据”，然后在几秒钟内返回“go”和正常宽度。

我尝试了固定定位和其他技巧，但按钮仍然向右移动或按钮和输入字段在调整窗口大小时分开。

所以我正在尝试Flexbox：

.input-group-msgbox {
    display: flex;
    input {
      // Shrink and grow as needed, but never shrink so
      // small that we can't read the placeholder
      flex: 1 0 8em;
    }
    .btn {
      // Never shrink or grow
      flex: 0 0 auto;
    }
}

请看这支笔：http://codepen.io/smlombardi/pen/wKdVMP

除了文字“左右”之外，它还能完成所有工作。想法？

Answer 1

所以这里有两个常规选项（非Bootstrap）：

选项＃1

将div容器的direction从左到右更改为从右到左：

.input-group-msgbox { direction: rtl; }

然后颠倒来源中<input>和<button>的顺序：

<div class="input-group-msgbox">
    <span class="input-group-btn">
        <button class="btn btn-default" ... > ... </button>
    </span>
    <input type="text" class="form-control" ...>
</div>

然后从左到右direction应用于<input>和<button>：

input { direction: ltr; }
.btn { direction: ltr; }

当标签文字展开时，提交按钮现在会增加到左侧。

Revised Codepen

选项＃2

LADDA脚本解决方案。

标签文本增长时，将提交按钮向左展开

1 个答案:

选项＃1

选项＃2