我有一个带有两个输入的 from 行。有一个逻辑会在该行的最后一个输入旁边显示 ⚠️(警告表情符号),具体取决于输入编号。
但是,由于弹性框的工作原理,输入会缩小...我需要做什么才能保持输入的大小相同并在旁边显示警告表情符号?
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-3 border-bottom order-line-item mx-0">
<div class="col-6 pl-3 pr-4">
<div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
<div class="d-flex align-items-center flex-fill">
<div class="ml-3 d-flex flex-column align-items-start flex-fill">
<div class="d-flex align-items-center w-100">Snowboard</div>
</div>
</div>
</div>
</div>
<div class="col-2 d-flex align-items-center">
<div>
<input type="number" name="unitPriceAmount" class="form-control undefined" min="0" value="0">
</div>
</div>
<div class="col-2 d-flex align-items-center">
<div class="d-flex align-items-center flex-row">
<input type="number" name="quantity" class="form-control undefined" min="0" value="0">
<span class="ml-1" title="Some Warning">⚠️</span>
</div>
</div>
<div class="col d-flex align-items-center justify-content-end">
<div>€0</div>
</div>
<div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>
你可以试试这个。您可以使用 CSS 设置文本框宽度。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row py-3 border-bottom order-line-item mx-0">
<div class="col-6 pl-3 pr-4">
<div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
<div class="d-flex align-items-center flex-fill">
<div class="ml-3 d-flex flex-column align-items-start flex-fill">
<div class="d-flex align-items-center w-100">Snowboard</div>
</div>
</div>
</div>
</div>
<div class="col-5 d-flex align-items-center">
<input type="number" name="unitPriceAmount" class="form-control undefined" style="width: 100px" min="0" value="0">
<div class="d-flex align-items-center flex-row ml-2">
<input type="number" name="quantity" class="form-control undefined" style="width: 100px" min="0" value="0">
<span class="ml-1" title="Some Warning">⚠️</span>
</div>
</div>
<div class="col d-flex align-items-center justify-content-end">
<div>€0</div>
</div>
<div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>
您可以为警告标志指定
position
或 absolute
,以便将其从流程中删除并且不会影响任何其他元素:
.d-flex.align-items-center.flex-row {
position: relative;
}
.ml-1 {
position: absolute;
left: 100%;
}
如果能给元素一些具体的类名就更好了。