Blazor - 使 InpuText 适合父容器答案

【问题标题】：Blazor - Make InpuText fit to parent containerBlazor - 使 InpuText 适合父容器
【发布时间】：2020-08-15 00:36:37
【问题描述】：

我想在同一行上制作一个包含多个 InputText 的表单。但 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>

【问题讨论】：

标签： html css blazor

【解决方案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>

【讨论】：

谢谢！不知道为什么我没有考虑过