代码之家 › 专栏 › 技术社区 › Chris

如何将引导选项卡设置为自动宽度?

twitter-bootstrap css

Chris · 技术社区 · 8 年前

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

有什么方法可以设置宽度,使其与名称的长度相适应吗?

如果被退回的名字是烹调室,则应调整标签以适合它

标签是用这个生成的

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

1 回复 | 直到 8 年前

Amin Kamalinia 8 年前

亲爱的朋友,我知道默认情况下标签会根据文本进行调整。请移除固定宽度并检查此样本。

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>

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前