Html CSS引导：带有错误消息的内联表单

我使用的是BootstrapV3.2。我有一个内联表单，但我想显示一条错误消息，但这并不好：

有没有办法做到这一点：

HTML:

{{errorMsg}
登录

问题是输入增加了，我不想这样。

这对我来说很有效

<div class="jumbotron">
    <p class="lead">{{errorMsg}}</p>
    <form class="form-inline" role="form" name="loginForm">
        <div class="form-group has-warning has-feedback">
          <label class="control-label sr-only" for="username">Gebruikersnaam</label>
          <input class="form-control" ng-model="user.name" id="username" type="text" placeholder="Gebruikersnaam" required>
          <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" ng-model="user.password" placeholder="Wachtwoord" required>
        </div>
        <button onclick="javascript:void(0)" class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
    </form>
</div>

{{errorMsg}
格布鲁伊克斯纳姆酒店
登录

---

我还做了一个引导：

请尝试使用这个片段

HTML:

<div class="jumbotron">
    <p class="lead">{{errorMsg}}</p>
    <form class="form-inline" role="form" name="loginForm">
        <div class="form-group">
            <input class="form-control" ng-model="user.name" type="text" placeholder="Gebruikersnaam" required>
            <div>
                <span class="glyphicon glyphicon-warning-sign error-sign"></span>
            </div>
        </div>
    <div class="form-group">
      <input type="password" class="form-control" ng-model="user.password" placeholder="Wachtwoord" required>
    </div>
        <button onclick="javascript:void(0)"class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
    </form>
</div><div class="jumbotron">
    <p class="lead">{{errorMsg}}</p>
    <form class="form-inline" role="form" name="loginForm">
        <div class="form-group has-warning has-feedback">
          <label class="control-label sr-only" for="username">Gebruikersnaam</label>
          <input class="form-control" ng-model="user.name" id="username" placeholder="Gebruikersnaam" required="" type="text">
          <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group">
          <input class="form-control" ng-model="user.password" placeholder="Wachtwoord" required="" type="password">
        </div>
        <button onclick="javascript:void(0)" class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
    </form>
</div>

---

您可以看到

请缩进您的html，这样我们就不必猜测哪些内容属于哪些内容。您没有使用任何标记进行验证状态。。？（）但这不适用于内联表单否，我希望在输入下显示警告标志（参见屏幕截图）

<div class="jumbotron">
    <p class="lead">{{errorMsg}}</p>
    <form class="form-inline" role="form" name="loginForm">
        <div class="form-group">
            <input class="form-control" ng-model="user.name" type="text" placeholder="Gebruikersnaam" required>
            <div>
                <span class="glyphicon glyphicon-warning-sign error-sign"></span>
            </div>
        </div>
    <div class="form-group">
      <input type="password" class="form-control" ng-model="user.password" placeholder="Wachtwoord" required>
    </div>
        <button onclick="javascript:void(0)"class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
    </form>
</div><div class="jumbotron">
    <p class="lead">{{errorMsg}}</p>
    <form class="form-inline" role="form" name="loginForm">
        <div class="form-group has-warning has-feedback">
          <label class="control-label sr-only" for="username">Gebruikersnaam</label>
          <input class="form-control" ng-model="user.name" id="username" placeholder="Gebruikersnaam" required="" type="text">
          <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group">
          <input class="form-control" ng-model="user.password" placeholder="Wachtwoord" required="" type="password">
        </div>
        <button onclick="javascript:void(0)" class="btn btn-default" ng-disabled="loginForm.$invalid" ng-click="login()">Log in</button>
    </form>
</div>

.form-inline .form-group {
    vertical-align: top;
}

.error-sign {
    float:left;
    margin-top: 7px;
}