ブートストラップをフォーマットする方法

Question

現在ログインページを編集していて、ブートストラップアイコンがusername.Itとして整列していないことがわかりましたが、中心になっているはずですが、現在はユーザ名ボックスのフィールドに少し上がっています。中心になるように編集する方法。

第2に、最初にページにリロードする場合の設定方法は、ユーザー名の入力を開始するまでアイコンが表示されません。

<h3 class="form-title">Login to your account</h3> 
        <div class="alert alert-danger display-hide"> 
         <button class="close" data-close="alert"></button> 
        </div> 
         <div class="form-group has-feedback" ng-class="loginForm.username.$valid ? 'has-success' : 'has-error';"> 
          <label class="control-label" for="username">Username</label> 
          <input type="text" class="form-control" id="username" name="username" 
            ng-model="input.username" required> 
          <span class="glyphicon form-control-feedback" 
            ng-class="loginForm.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span> 
         </div> 

my login page

Answer 1

（現在私のログインページを編集していますが、私のブートストラップアイコンはそれは中心になっているはずですが、現在はusernameボックスのフィールドに少し上がっています。どのように中央であることを編集することができます。）

• は、あなただけのパディングトップやパディング下（第二に、どのように設定するための

てそれを設定することができるかどうかのページへの初めてのリロード、アイコン、私は、ユーザー名を入力し始めるまでは表示されません。）

• あなたはCSSの不透明度1を追加フォーカスの入力のためにJavaScriptを追加し、デフォルトでは、CSSの不透明度を0を追加する必要がありますが、コードの下に参照してください。

CSS - .your-container-class .glyphicon { opacity: 0;}

JS - $("#username").focusin(function() { $("#username").siblings(".glyphicon").css("opacity", "1"); });

Answer 2

あなたはそれが使用して余裕だ調整することにより、要素のアライメント（この場合はアイコン）を調整するためにCSSを使用することができます。

.your-container-class .glyphicon { 
    margin-top: 15px; 
} 

はとdiv要素にフォームを包むようにしてくださいクラスまたはIDを使用して、アプリケーション全体にグリフのスタイルを適用しないようにしてください:-)