css - 按钮在同一行的文本区域

Question

这段代码:

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <textarea v-model="notes" maxlength="1000" class="form-control" row="2" :disabled="laptop.scrapped !== 0">
            </textarea>
            <button class="btn btn-default input-group-addon" :disabled="!notes">Save</button>
        </div>
    </div>
    <div class="col-sm-2">
    </div>
    <div class="col-sm-4 text-right button">
        <button class="btn btn-primary">Return</button>
        <button class="btn">Select and Return</button>
    </div>
</div>

结果:

我不得不添加以下 CSS 以使按钮位于底部而不是 float 在中间，我想知道这是否与此有关:

.row {
    position: relative;
}

.button {
    position: absolute;
    bottom:0;
    right:0;
}

Answer 1

我建议您对媒体查询使用 Flexbox 而不是 absolute 定位。 DEMO

@media(min-width: 768px) {
  .row.flex {
    display: flex;
    align-items: flex-end;
  }
}