Question

我希望垂直标签的垂直边框在整个页面上运行，而不是在标签结束处完成。

expecting an output like this 但是因为我在选项卡上给出了border-right，所以它结束了

使用趋势的最后一个标签。赋予内容边框权限可确保边框的高度正确，但会破坏制表符和内容之间的间距。

HTML： -

<div class='tabbable tabs-left'>
          <ul class='nav nav-tabs'>
            <li class='active'>
              <a href="/startups?startup=All">All</a>
            </li>
            <li>
              <a href="/startups?startup=New">New</a>
            </li>
            <li>
              <a href="/startups?startup=Featured">Featured</a>
            </li>
            <li>
              <a href="/startups?startup=Ending+Soon">Ending Soon</a>
            </li>
            <li>
              <a href="/startups?startup=Trending">Trending</a>
            </li>
          </ul>
        </div>

Answer 1

这不是默认的Bootstrap行为，因此您必须稍微修改css。要实现此目的，垂直标签<ul>及其所有父级应具有属性height: 100%。

对于html和body，我会直接应用样式，但对于<div>和<ul>，我会使用自定义类，以便不修改Bootstrap类来维护最终将来在其他布局中使用的预期行为。

这是demo。

要添加的css：

html{
    height: 100%;
}

body{
    height: 100%;
}

.tabbable.tabs-left.full-height{
    height: 100%;
}

.nav.nav-tabs.full-height{
    height: 100%;
}

要修改的html：

<body>
    <div class='tabbable tabs-left full-height'>
        <ul class='nav nav-tabs full-height'>
        ...........

twitter bootstrap垂直标签左边框高度

1 个答案: