.net 我无法让我的标签显示,但其余的文本框和按钮显示正确,有人可以帮助我吗?

jq6vz3qz  于 2023-05-02  发布在  .NET
关注(0)|答案(1)|浏览(217)

我创建了一个允许我注册联系人的模式,在我这样做的第一时刻,一切都显示得很好,但后来标签不再显示,我找不到解决它的方法,这是我的代码:

<div class="modal fade @modalClass" id="staticBackdrop" style="display:@modalDisplay" data-bs-backdrop="static"  data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Crear Contacto</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick=@Hide></button>
            </div>
            <div class="modal-body">
                <EditForm Model="@contacto">
                    <div class="form-group">
                        <label class="h6 mb-2">Nombre</label>
                        <div class="input-text">
                            <InputText class="form-control" id="nombre" @bind-Value="contacto.Nombre" />
                        </div>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="h6 mb-2" for="apellido">Apellido</label>
                        <div class="input-text">
                            <InputText class="form-control" id="apellido" @bind-Value="contacto.Apellido" />
                        </div>
                    </div>
                    <br/>
                    <div class="form-group">
                        <label class="h6 mb-2" for="mail">Email</label>
                        <div class="input-text">
                            <InputText class="form-control" id="mail" @bind-Value="contacto.Mail" />
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <label class="h6 mb-2" for="documento">Documento</label>
                        <div class="input-text">
                            <InputText class="form-control" id="documento" @bind-Value="contacto.Documento" />
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <label class="h6 mb-2" for="celular">Celular</label>
                        <div class="input-text">
                            <InputText class="form-control" id="celular" @bind-Value="contacto.Celular" />
                        </div>
                    </div>
                </EditForm>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick=@Hide>Cancelar</button>
                <button type="button" class="btn btn-primary"@onclick=@Guardar>Guardar</button>
            </div>
        </div>
    </div>
</div>
disho6za

disho6za1#

我认为标签没有显示是因为每个表单组div之间的“br”标记导致它们被推下。
我认为“br”标签在表单组之间产生了额外的间距,您可以尝试添加边距或填充。
我采用了您的代码并重写了其中的一些代码,以删除“br”标记,并在每个表单组div中添加了mb-3(margin-bottom)以在它们之间创建间距。您可以根据需要调整边距以满足您的需要:

<div class="modal fade @modalClass" id="staticBackdrop" style="display:@modalDisplay" data-bs-backdrop="static"  data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">Crear Contacto</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick=@Hide></button>
            </div>
            <div class="modal-body">
                <EditForm Model="@contacto">
                    <div class="form-group mb-3">
                        <label class="h6 mb-2">Nombre</label>
                        <div class="input-text">
                            <InputText class="form-control" id="nombre" @bind-Value="contacto.Nombre" />
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="h6 mb-2" for="apellido">Apellido</label>
                        <div class="input-text">
                            <InputText class="form-control" id="apellido" @bind-Value="contacto.Apellido" />
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="h6 mb-2" for="mail">Email</label>
                        <div class="input-text">
                            <InputText class="form-control" id="mail" @bind-Value="contacto.Mail" />
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="h6 mb-2" for="documento">Documento</label>
                        <div class="input-text">
                            <InputText class="form-control" id="documento" @bind-Value="contacto.Documento" />
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="h6 mb-2" for="celular">Celular</label>
                        <div class="input-text">
                            <InputText class="form-control" id="celular" @bind-Value="contacto.Celular" />
                        </div>
                    </div>
                </EditForm>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick=@Hide>Cancelar</button>
                <button type="button" class="btn btn-primary"@onclick=@Guardar>Guardar</button>
            </div>
        </div>
    </div>
</div>

相关问题