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

Posted 2023-03-13

【中文标题】Bootstrap CSS 将警报对齐到输入字段

【英文标题】：Bootstrap CSS align alert to input field

【发布时间】：2017-04-20 14:46:03

【问题描述】：

我正在尝试让我的警报对齐以在我的输入字段旁边弹出。

 <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();
     
);
 

【问题讨论】：

所有这些元素的现有css 是什么？

【参考方案1】：

为了解决您的问题，您可以将 alert 类的 padding-left 设置为 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>