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引導：內聯窗體，並顯示錯誤消息

回答

相關問題