부트 스트랩 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 { 
    padding-left: 0px !important; 
} 

당신이 입력 상자의 오른쪽에있는 alert_placeholder을 정렬 할 대신하는 경우

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