Вкладки Twitter Bootstrap: как увеличить расстояние между вкладками

Я использую ui bootstrap для angular (который использует twitter bootstrap css). Мне удалось центрировать вкладки, но я не могу понять, как добавить интервалы (поля) между вкладками (ПРАВО ИЛИ ЛЕВО). Я попытался добавить margin-right: 100px; в .nav-tabs > li, но это не сработало.

HTML:

<html>
    <body>

               <tabbed-Panel class="bottomTabPanel">
            <!--<div data-fade="1" ngModel="activeTab" bs-Tabs>-->
            <tabs>
                <pane ng-repeat="pane in panes" heading="{{pane.title}}"  active="pane.active">
                    <div ng-include src="activeContent()"></div>
                </pane>
            </tabs>
            <!--</div>-->
        </tabbed-Panel>
            </div
    </body>
</html>

CSS

.bottomTabPanel{

    position:absolute;
    bottom:-12px;
    display:block;  
    background-color:#666666;
    padding-left: 75px;
    padding-right: 75px;
}
    /*Bottom tab panel style: */
    .nav-tabs>li>a {
        height:73px;
        width: 131px;
        border: 1px solid transparent;
        -webkit-border-radius: 0px 0px 0 0;
        -moz-border-radius: 0px 0px 0 0;
        border-radius: 0px 0px 0 0;
        color: #5261ac;
        font-size: 19px;
        font-weight:bold;
        background-color:#c2c8e4;


     }

     .nav-tabs>.active>a, .nav-tabs>.active {
        color: #ffffff;
        cursor: default;
        background-color:#ed174f;
        border:none;
     }
      /* center tabs in container */
     .nav-tabs > li {
        float:none;
        display:inline-block;
        margin-right: 100px;
     }
     .nav-tabs {
        text-align:center;
     }

      /* for centering text in the tab*/
     .tabbable ul {
            display:table-row;
        }
        .tabbable ul li
        {
            display: table-cell;
            list-style-type: none;
            vertical-align: middle;
            /*margin left & right here fixed the issue! */
            margin-right: 16px;
            margin-left: 16px;
        }
        .tabbable ul li a {
            display:table-cell;
            vertical-align: middle;
            text-align:center;

        }

tabs twitter-bootstrap margins
person Mike6679    schedule 03.06.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Установите margin-left и margin-right из .nav-tabs > li > a, .nav-pills > li > a. margin-right по умолчанию составляет 2 пикселя.

b.e:

    .nav-tabs > li > a, .nav-pills > li > a {margin-left:25px;margin-right:27px;}
person Bass Jobsen    schedule 04.06.2013
comment
Ваш код будет работать, однако мой код для центрирования текста для каждой вкладки (по горизонтали и вертикали) переопределяет его. См. код после комментария: /* для центрирования текста на вкладке*/ . Мысли? - person Mike6679; 04.06.2013
comment
Вы можете показать полный исходный код html? По умолчанию центрирование выполняется путем заполнения. Итак, попробуйте: .tabbable ul li a{ line-height: 20px; padding-bottom: 8px; padding-top: 8px;} и .tabbable ul > li > a{ padding-left: 12px; padding-right: 12px; - person Bass Jobsen; 04.06.2013

arrow_upward
0
arrow_downward

Добавление margin-right и margin-left к .tabbable ul li создало нужные мне поля. Спасибо Bass Jobsen за то, что указал мне правильное направление.

.tabbable ul li
            {
                display: table-cell;
                list-style-type: none;
                vertical-align: middle;
                /*margin left & right here fixed the issue! */
                margin-right: 16px;
                margin-left: 16px;
            }
person Mike6679    schedule 04.06.2013