Bootstrap下拉按鈕串列隱藏并充滿

大家好，我嘗試在 html 表格單元格下拉按鈕中實作列印與當前行相關的檔案，為此我選擇了引導按鈕。該按鈕位于行中的最后一個位置，當我單擊下拉 btn 結果時，不會以全寬顯示，有時當串列較大時，串列會像螢屏截圖一樣隱藏。

我嘗試在li上手動設定width:100%并且我在ul上嘗試 100%但不起作用。

我只想顯示完整顯示的串列名稱，而不像螢屏截圖上那樣。

輸出：

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

有誰知道如何做到這一點？謝謝

uj5u.com熱心網友回復：

只需遵循Bootstrap 示例，下拉選單似乎就可以正常作業。在 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

標籤：javascripthtmljQuerycss推特引导

上一篇：如何以編程方式終止EMR任務

下一篇：在InnoSetup中添加4個許可頁面