0

我希望垂直选项卡的垂直边框在整个页面上运行，而不是在选项卡结束的地方结束。

期待这样的输出但是，由于我在选项卡上给出了border-right，所以它结束了

最后一个标签是趋势。为内容赋予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>
4

1 回答 1

1

这不是默认的 Bootstrap 行为，因此您必须css稍作修改。为此，垂直选项卡<ul>及其所有父项都应具有属性height: 100%.

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

这是一个演示。

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'>
        ...........
于 2013-08-13T15:33:25.957 回答