Вкладки полной ширины с использованием Bootstrap (поддержка IE)

Я пытаюсь настроить вкладки Bootstrap, чтобы они охватывали всю ширину их контейнера. Здесь мой код (минимальный рабочий пример):

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="#" onclick="location.href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css'; return false;" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

Я получаю этот (нежелательный) результат:

Однако я хочу, чтобы вкладка "заголовки" охватывала всю ширину контейнера табуляции и равномерно распределяла их индивидуальную ширину, что-то вроде этого желаемого результата:

Как мне это достичь?

Обновление 1: Здесь JSFiddle: http://jsfiddle.net/agib/FZy4n/

Обновление 2: У меня уже был рабочий виджет с использованием пользовательского javascript. Тем не менее, я ищу решение, которое без проблем связано с Bootstrap и, таким образом, полагается только на стандартный JavaScript-скрипт Bootstrap.

Обновление 3: Если я удалю/закомментирую

 /* table-layout: fixed; */

ширина заголовка занимает все горизонтальное пространство по мере необходимости. Однако их ширина получается из длины текста заголовка и, следовательно, не распределяется равномерно.

Это не то, что я хочу:

Обновление 4:. Предстоящий Bootstrap 3, кажется, имеет вкладки полной ширины в качестве стандартного компонента, используя класс .nav-justified: Bootstrap 3 → Navs → Обоснованный nav

Ответ 1

Возможно, я нашел ваше решение:

Создайте этот класс с помощью css:

.take-all-space-you-can{
    width:100%;
}

И затем примените этот класс к тэгам li в свой ul. Выполнение всех этих li занимает пространство, в котором они могут и автоматически делит пространство в одной строке.

DEMO

Ответ 2

Twitter Bootstrap 3 содержит класс для этого класса nav-justified.

Используйте его так:

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
</ul>

Ответ 3

Вы можете использовать javascript и jquery.

Основываясь на ответе Nick Bull выше, вы можете динамически определять количество вкладок на странице с помощью JQuery.

Попробуйте это на странице html.

<script type="text/javascript">
   $(document).ready(function() {
       var numTabs = $('.nav-tabs').find('li').length;
       var tabWidth = 100 / numTabs;
       var tabPercent = tabWidth + "%";
       $('.nav-tabs li').width(tabPercent);
   });
</script>

Ответ 4

Простой:

.nav-tabs > li {
    /* width = (100 / number of tabs). This example assumes 3 tabs. */
    width:33.33333%;
}

Надеюсь, что это поможет!

Ответ 5

Попробуйте это решение, только одну строку кода для этого.

.full-width-tabs > ul > li {   width: 100%;  }

Это приведет к тому, что вкладки будут охватывать всю ширину своего контейнера.

Посмотрите на jsfiddle: http://jsfiddle.net/BhGKf/

Ответ 6

Попробуйте

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}

Ответ 7

Попробуйте это для всех ".nav-пилюль" и каждого элемента "li" внутри с двойным циклом.

function(){
$('.nav.nav-tabs').each(function(){
    var liGroup = $(this).children('li');
    var liLength= liGroup.length;
    liGroup.each(function(){
        var liWidth = 100/liLength-1;
        $(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
    });
});}

DEMO http://jsfiddle.net/