主页 / 问题 / 1018322
Accepted
Timofey Melentev
Asked:2020-08-28 22:50:59 +0000 UTC2020-08-28 22:50:59 +0000 UTC

将跨度移动到另一行

  • 772

有这个代码：

<div class="row">
    <div class="col-4">
        <form asp-action="Login" asp-controller="Account" asp-anti-forgery="true">
            <div class="validation" asp-validation-summary="ModelOnly"></div>

            <div class="input-group">

                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">E-mail</span>
                </div>
                <input class="form-control" type="text" asp-for="Email" />

                <span asp-validation-for="Email" />


            </div>

            <div class="input-group">
                <div class="input-group-prepend">
                    <span id="basic-addon1" class="input-group-text">Пароль</span>
                </div>
                <input class="form-control" asp-for="Password" />
                <span asp-validation-for="Password" />
            </div>
            <div class="form-group">
                <input type="submit" value="Войти" class="btn" />
            </div>
        </form>
    </div>
    <div class="flex-row ml-auto"><img style="width:35rem;" src="~/images/soldier.png" /></div>
</div>

起初一切都很好：

验证前

但是如果validation.js 突然起作用了，那么结果是这样的：

验证后

我想将警告向下移动，但我不明白要使用哪些属性。尝试了以下方法：

display:block, flex, inline-block white-space:normal 但这无济于事

html

3 个回答

  1. 我尝试将 span 放在 之后，与其他所有内容一样，它没有帮助，但如果将它放在另一个 div 中，那么一切正常。

    
    <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">E-mail</span>
                    </div>
                    <input class="form-control" type="text" asp-for="Email" />
                </div>
                <div>
                    <span asp-validation-for="Email" />
                </div>

    我急忙提出问题，我仍然接近答案，我道歉。如果有更好的替代解决方案，我将不胜感激

    • 0 
  2. <div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">E-mail</span>
  </div>
  <input class="form-control" type="text" asp-for="Email" />
</div>
<div asp-validation-for="Email"></div>
    • 0
  3. Best Answer

    如果我理解正确，可以将 span 设置为 display: block 并且不包含在 div 中。另外，据我了解，这是 bootstrap4，我很少使用它，但也许 input-group 是一个 flex 容器，因此您需要为 span 编写：

    input-group {
   flex-wrap: wrap;
}

span {
    flex: 0 0 auto;
    width: 100%;
}

    • 0

相关问题