css - 如何将 Bootstrap 选项卡设置为自动宽度？

Question

我有从数据源动态生成的 Bootstrap 选项卡，目前我已将选项卡宽度设置为固定宽度，但返回的一些名称比我设置的宽度长。

有什么方法可以设置它根据名称的长度调整的宽度吗？

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

亲爱的 friend ，据我所知，默认情况下选项卡会调整以适应文本。请删除固定宽度并检查此示例。

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>