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