如何將引導程序選項卡設置為自動寬度？

Question

我有從數據源動態生成的引導程序選項卡，當前我已將選項卡的寬度設置為固定寬度，但是返回的某些名稱比我設置的寬度要長。

有什么方法可以設置寬度以適應名稱的長度？

IE（如果返回的名稱是Cooking Room），則選項卡應進行調整以適合它

使用此選項卡生成

function CreateTabs(data) {
    for (i = 0; i < data.Room.Areas.length; i++) {
        $('#List').append("<li id='" + data.Room.Areas[i].AreaID + "' class='nav-item not-active'><a class='nav-link' href='" + data.Room.Areas[i].AreaName + "' data-toggle='tab'>" + data.Room.Areas[i].AreaName + "</a></li>");
    }
}

Answer 1

親愛的朋友，據我所知，默認情況下，標簽會根據文本進行調整。 請移除固定寬度並檢查此樣本。

https://getbootstrap.com/docs/4.1/components/navs/

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active Active Active Active Active Active Active Active Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link Link Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled Disabled</a> </li> </ul>