CSS引导：内联窗体，并显示错误消息

我使用Bootstrap v3.2。我有一个内联形式，但我想显示错误信息，但它不是很好： CSS引导：内联窗体，并显示错误消息

有没有办法做到这一点： enter image description here

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 style="float:left" class="glyphicon glyphicon-warning-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>

的问题在于投入增加了，我不想这样做。

来源

2014-07-12 DazDylz

请缩进您的HTML，所以我们不必去猜测里面是什么属于什么。 – thebjorn

当然，等一下 – DazDylz

你没有使用任何标记验证状态..？（http://getbootstrap.com/css/#forms-control-validation） – thebjorn

这对我的作品..

<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>

我也做了一个bootply：http://www.bootply.com/BtRzVTdeTU

来源

2014-07-12 10:23:57 thebjorn

不，我想输入下面的警告标志（见截图） – DazDylz

请尝试使用这个片段

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>

CSS：

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

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

你可以看到，here

来源

2014-07-12 12:04:19

CSS引导：内联窗体，并显示错误消息

回答

相关问题