如何增加弹出框宽度答案

【问题标题】：How to increase the popover width如何增加弹出框宽度
【发布时间】：2020-03-19 20:21:56
【问题描述】：

$(document).ready(function(){
	$('#autodelete_spmlds').popover({
		placement: 'bottom',
		title: '<span style="color:black;font-size: 12px;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif">Settings</span>' + ('&nbsp;') + ('&nbsp;') + '<button type="button" class="close pull-right" data-dismiss="alert" style="color:black;">&times;</button>',
		html: true,
		content: function () {
		return $('#autodelete').html();
		}
	});
	
	$(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
		
	});
});



<div class='hide' id='autodelete'>
			<form class="form-bordered" action="<?=base_url()?>approval/update_selectedspmlds" id="spm_options" name="" method="post" >
				<div class="panel-group">
					<div class="panel panel-default">
						<label>Delete After</label>
						<select class="form-control" id="spm" name="spm" required>
							<option value=""> Delete Leads automatically </option>
							<option value="7">1 Week Older</option>
							<option value="30">1 Month</option>
							<option value="60">2 Month</option>
						</select>
					</div>
					<br/>
					<div class="popover-footer">
						<input type="submit" id="smtbtn" class="btn btn-info btn-sm" value="Save">
					</div>
				</div>
			</form>
		</div>

在这里，我需要在同一行中提供“删除后”并选择具有相同宽度的框，但我已经尝试过它不会出现。我不知道为什么。请任何人帮助我。

【问题讨论】：

检查你的代码，它返回一个错误:)

标签： jquery html css ajax

【解决方案1】：

只需为弹出框编写自定义 CSS。

见下例

$(document).ready(function(){
  $('.btn-success').popover({
      title: "Header", 
      content: "Blabla", 
      placement: "bottom"
  });  
});

.popover {
  width:200px
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Options</h3>
  <p>The <strong>placement</strong> option specifies the popover position.</p>
  <div>
    <button class="btn btn-success btn-md">Bottom</button>
  </div>
</div>


</body>
</html>

如果您可以为该 CSS 进行嵌套，那么请这样做。否则，它将应用于所有弹出框。

【讨论】：