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

cssこれはデフォルトの Bootstrap の動作ではないため、少し変更する必要があります。これが機能するには、垂直タブ<ul>とそのすべての親にプロパティが必要height: 100%です。

htmlとの場合bodyはスタイリングを直接適用しますが、<div>との<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 に答える