ブートストラップCSSをアラート入力フィールドに合わせる

Question

アラートを整列させて、次に入力フィールドをポップアップ表示させようとしています。

<div class="container"> 
    <input type="text" id="barcode" autocomplete="off"/><div id =  "alert_placeholder"></div> 
</div> 

私はajax呼び出しでアラートを呼び出します。

function bulkConfirm(text) { 
var response = ''; 
$.ajax({ type: "GET", 
     url: ("https://"+environment+"/nb/"+user+"/confirm/"+text), 
headers: { 'Authorization': authorization}, 
    async: true, 
    success : function(data) 
    { 
     $('#alert_placeholder').html("<div class='alert alert-success alert-dismissable fade in'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'></span><strong>'Success!'</strong>"+data+"</div>"); 
    skipUpdate = 1; 
    updateScans(); 
    } 
}); 
} 

Answer 1

あなたは警告クラスのために0にパディング左を設定することができ、あなたの問題を解決するために：あなたが入力ボックスの右側にalert_placeholderを整列する代わりに、場合

.alert { 
    padding-left: 0px !important; 
} 

.alert { 
    padding: 5px !important; 
} 
#alert_placeholder { 
    display: inline-block; 
} 

例：

次のスタイルを使用することができます

// 
 
// simulation of ajax call.... 
 
// 
 
var data = "....."; 
 
$('#alert_placeholder').html("<div class='alert alert-success alert-dismissable fade in'>" + 
 
     "<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>" + 
 
     "<span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'>" + 
 
     "</span><strong>'Success!'</strong>"+data+"</div>"); 
 
     
 
     
 
$('#alert_placeholder1').html("<div class='alert1 alert alert-success alert-dismissable fade in'>" + 
 
     "<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>" + 
 
     "<span class='glyphicon glyphicon-ok' aria-hidden='true' style='padding-right:5px;'>" + 
 
     "</span><strong>'Success!'</strong>"+data+"</div>");

.alert { 
 
    padding-left: 0px !important; 
 
} 
 

 

 
.alert1 { 
 
    padding: 5px !important; 
 
} 
 
#alert_placeholder1 { 
 
    display: inline-block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <input type="text" id="barcode" autocomplete="off"/><div id="alert_placeholder"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <input type="text" id="barcode" autocomplete="off"/><div id="alert_placeholder1"></div> 
 
</div>