如何增大Popover宽度并使标签与下拉框同宽同行？

针对你提出的两个需求，我整理了亲测有效的解决方案，直接上手就能用：

1. 增大Popover的宽度 #

Bootstrap Popover默认有固定的最大宽度限制，我们可以通过自定义CSS覆盖这个规则，同时确保内部内容能自适应宽度：

/* 自定义Popover宽度，可按需调整数值 */
.custom-popover {
    max-width: 400px;
    width: 100%;
}

/* 确保Popover内容容器宽度适配 */
.custom-popover .popover-content {
    width: 100%;
    padding: 10px;
}

然后在Popover初始化代码里，给它绑定自定义类：

$(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(); },
    // 这里添加自定义类到模板中
    template: '<div class="popover custom-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
  }); 
  $(document).on("click", ".popover .close" , function(){ 
    $(this).parents(".popover").popover('hide'); 
  }); 
}); 

2. 让“Delete After”标签与下拉选择框同宽且同行 #

推荐用Flex布局来实现，灵活度更高，修改你的HTML结构如下：

<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"> 
        <!-- 用flex容器包裹label和select，实现同行对齐 -->
        <div style="display: flex; align-items: center; width: 100%; gap: 10px; padding: 10px 0;">
          <label style="width: 30%; margin: 0;">Delete After</label>
          <select class="form-control" id="spm" name="spm" required style="width: 70%;"> 
            <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>
      </div> 
      <br/> 
      <div class="popover-footer"> 
        <input type="submit" id="smtbtn" class="btn btn-info btn-sm" value="Save"> 
      </div> 
    </div> 
  </form> 
</div>

如果更习惯用Bootstrap的网格系统，也可以这样写：

<div class="panel panel-default">
  <div class="row">
    <div class="col-xs-4">
      <label class="control-label" style="margin-top: 7px;">Delete After</label>
    </div>
    <div class="col-xs-8">
      <select class="form-control" id="spm" name="spm" required> 
        <!-- 选项保持不变 -->
      </select>
    </div>
  </div>
</div>

两种方法都能实现标签与下拉框同行同宽的效果，你可以根据自己的代码风格选择~

内容的提问来源于stack exchange，提问作者Shwetha Shetty