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以使按钮位于底部而不是浮在中间，我想知道这是否与它有关：

.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;
  }
}

Answer 2

  .clear {clear: both;}

并且class clear的新代码是：

@IBAction func upgradePurchase(_ sender: UIButton) {
    if GlobalVariables.sharedManager.balance >= GlobalVariables.sharedManager.UpgradesPrice[GlobalVariables.sharedManager.UpgradesCurrent] {

    }
}

现在按钮总是放在底部而不是漂浮在中间。

Answer 3

如果我更正你想要textarea旁边的保存按钮。

在class="form-control"上textarea将使其占据整个宽度。删除类的代码如下：

<div class="row">
    <div class="col-sm-6">
        <div class="input-group">
            <textarea v-model="notes" maxlength="1000"  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>

现在，保存按钮将紧挨着textarea放置。您可以使用margin和padding按照自己喜欢的方式正确定位。

编辑对齐按钮：

<div class="row">
    <div class="col-sm-2">
        <div class="input-group">
            <textarea v-model="notes" maxlength="1000" row="2" :disabled="laptop.scrapped !== 0">
            </textarea>

        </div>
    </div>
    <div class="col-sm-2">
      <button class="btn btn-default" style="margin-left:-30px;">Save</button>
    </div>
    <div class="col-sm-8 text-right button">
        <button class="btn btn-primary">Return</button>
        <button class="btn">Select and Return</button>
    </div>
</div>

Textarea与同一行上的按钮

3 个答案: