Bootstrap 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

为了解决您的问题，您可以将 padding-left 设置为 0 for alert class:

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

Bootstrap CSS 将警报与输入字段对齐

Bootstrap CSS align alert to input field

css

alerts

twitter-bootstrap