Blazor - 使 InputText 适合父容器

Question

我想制作一个在同一行上包含多个 InputText 的表单。但输入文本宽度始终为 203px。如何指定 InputText 以适合父宽度？

<div class="row">
    <div class="col-2">
        <label>Address</label>
    </div>

    <div class="col-3">
        <InputText @bind-Value="Address.Postcode" placeholder="Postcode" />
    </div>

    <div class="col-3">
        <InputText @bind-Value="Address.HouseNumber" placeholder="House Nb" />
    </div>

    <div class="col-4">
        <InputText @bind-Value="Address.Street" placeholder="Street" />
    </div>
</div>

Answer 1

添加style="width: 100%"到输入

<div class="row">
    <div class="col-2">
        <label>Address</label>
    </div>

    <div class="col-3">
        <InputText style="width: 100%;" @bind-Value="Address.Postcode" placeholder="Postcode" />
    </div>

    <div class="col-3">
        <InputText style="width: 100%;" @bind-Value="Address.HouseNumber" placeholder="House Nb" />
    </div>

    <div class="col-4">
        <InputText style="width: 100%;" @bind-Value="Address.Street" placeholder="Street" />
    </div>
</div>