Bootstrap 下拉按钮列表隐藏并充满答案

【问题标题】：Bootstrap dropdown button list hiden and full withBootstrap 下拉按钮列表隐藏并充满
【发布时间】：2022-10-31 19:13:47
【问题描述】：

大家好，我尝试在 html 表格单元格下拉按钮中实现打印与当前行相关的文件，为此我选择了引导按钮。行中最后一个位置上的那个按钮，当我点击下拉 btn 结果时不会全宽显示，有时当列表更大时，列表会像屏幕截图一样隐藏。

我尝试手动设置宽度：100%上李我也尝试 100%ul但不工作。

我只想显示完整显示的列表名称，而不像屏幕截图上那样。

输出：

<td class="text-center">
   <div class="btn-group">
      <button type="button" onclick="return getProductFiles(54)" data-product-id="54" class="btn btn-secondaryr dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
      <i class="fa fa-print"></i> Izaberi
      </button>
      <ul class="dropdown-menu show" id="product_files_dropdown" style="width: 100%; position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(-32px, 40px);" data-popper-placement="bottom-start">
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a></li>
         <li style="width:100%;"><a href="" >1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a></li>
      </ul>
   </div>
</td>

当用户单击按钮时，我用 ajax 填充列表

function getProductFiles(product_id) {
        var self = product_id;

        $.ajax({
            type: "GET",
            url: '/admin/proizvod/ajax?product_files=' + self,

            success: function(result) {
                // $(".testn").html(result);
                console.log(JSON.parse(result));

                var json = JSON.parse(result);
                $('#product_files_dropdown').empty('');

                for (var i in json) {
                    var li = $('<li style="width:100%; border-bottom: 1px solid #333">');

                    li.append($('<a href="" id=' + json[i].Id + '>').html(json[i].name));

                    $('</li>');
                    $("#product_files_dropdown").append(li);
                }
            },
            error: function(xhr, status, err) {
                alert(err.toString(), 'Error - LoadListItemsHelper');
            },
            complete: function(result, jqXHR, status) {
                $(".loader").fadeOut();
            }
        });
    }

有谁知道如何做到这一点？谢谢

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

只需遵循Bootstrap examples，下拉菜单似乎就可以正常工作。在 Bootstrap 上应用的自定义样式导致了问题。

function getProductFiles(n) {
  // placeholder
}

<div class="row">
<div class="col">

<table class="table table-sm table-bordered">
 <thead><tr><th>A</th><th>Opcije</th><th>Stampanje</th></tr></thead>
  <tbody>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>
        <div class="dropdown">
          <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
     Izaberi
  </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu Pm2012 sa pecatom.PDF</a>
            <a class="dropdown-item" href="#">1667211114_Uputstvo za upotrebu pm2012 slikovno bez pecata.pdf</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

</div>
<div class="col">
  <div class="alert alert-success" style="min-height:10rem;">
  Some other text here
  </div>
</div>
</div>


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

【讨论】：