twitter-bootstrap - Twitter Bootstrap 选项卡 : How to: Increase spacing between tabs-6ren

twitter-bootstrap - Twitter Bootstrap 选项卡 : How to: Increase spacing between tabs

转载作者：行者123 更新时间：2023-12-04 07:04:15

25

4

我将 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;

        }

最佳答案

设置.nav-tabs > li > a, .nav-pills > li > a的margin-left和margin-right . margin-right 默认为 2px。

b.e:

    .nav-tabs > li > a, .nav-pills > li > a {margin-left:25px;margin-right:27px;}

关于twitter-bootstrap - Twitter Bootstrap 选项卡 : How to: Increase spacing between tabs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16906642/

25

4

0

文章推荐： design-patterns - 说装饰器比适配器更透明是什么意思？

文章推荐： windows-phone-7 - MediaElement 破坏 WP7 中的音频播客 (MediaPlayer)

tabs - 有没有办法垂直堆叠 `Tabs`？
我在看 Tabs UI 的选项。默认行为是它们水平堆叠。有没有办法改变它？我想堆叠Tabs垂直。它将节省大量的 UI“不动产”，尤其是在移动应用程序 UI 中。最佳答案尝试这个: Tabs ta
tabs - 无法在 Zsh 中将向后 TAB 作为 Shift-TAB
问题:在 Zsh 中使用 TAB 向后导航，类似于在 Firefox 中 Shift-TAB Shift-TAB 应该执行的操作示例我在终端中运行以下代码 ls 我明白了 A B C D E F
tab-completion - 将 tab 完成键绑定(bind)更改为 MC 中的 tab
有很多人想知道如何完成制表符。这不是这些问题之一。问题是如何将 tab 键分配给 tab 补全？ alt-tab/esc-tab 很痛苦。在面板禁用模式选项卡完成工作，这让我暂时...但我仍然希望面板
react-native - createBottomTabNavigator : how do I reload/refresh a tab screen on tab on the tab-icon?
所以我有一个带有 3 个屏幕的 TabNavigator。 import React from 'react'; import {TabNavigator,createBottomTabNavigat
tabs - 如何在文本框中按 Tab 键后触发事件
我想触发一个事件，例如当我在文本框中按 Tab 键时显示警报消息。 $("input").blur(function (e) { if (e.which == 9) alert(
javascript - $( "#tabs").tabs();不是函数
我将这段代码设置为创建一个选项卡式菜单，它显示为一个选项卡式菜单，但当我加载网站时，选项卡在单击时不会改变。在“检查元素”中它说 $( "#tabs").tabs();不是函数。我不知道下一步要解决这
javascript - 当您按 Tab 时，它应该 Tab 到下一个空白文本输入框 JavaScript，而不使用 Tab 索引
表单中有多个输入字段的示例，因为有一些字段在此之前会自动填充，如果我按 Tab 键，那么它应该跳过该自动填充的输入字段并应转到空白输入字段我尝试过，但是当我开始在空白输入中写入时会发生什么，它也会自
google-chrome - chrome.tabs 问题与 chrome.tabs.update 和 chrome.tabs.executeScript
我想写一个小的 chrome 扩展程序，它应该从网页 A(当前网页)获取信息，将选项卡更新到网页 B，然后将代码注入(inject)网页 B。不幸的是，以下代码正在将网页更新到 B 但注入(injec
Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty
如果当前事件选项卡中的表单很脏，我试图阻止 mat-tab 的选项卡更改。但是我找不到拦截选项卡更改事件的方法。 // Tab 0 Content // Tab
terminal - iterm2 问题 : create new tab with same path of previous current tab BUT 2 tabs are clones and not indepedent
我已从 MacOS Mojave 上的默认终端切换到 iterm2 .我有一个关于从当前选项卡打开新选项卡的问题。确实，我希望与上一个当前选项卡处于同一路径。为此，我执行了经典程序，即转到 ite
jquery-ui-tabs - $(...).tabs 不是函数
我在我的网站的两页上有此代码，但在一页上该功能不起作用。 Firebug 向我显示“$(...).tabs 不是函数”。我不明白为什么，谁能告诉我什么是错的？这是有效的: http://www.in
tabs - 如何在 CMD 中创建 %tab%
我需要可靠的方法来为 Windows 和 XP 创建 %tab% (包含一个制表符)。 SET TAB=" " 应该适用于 Windows 7(未测试)但不适用于 Win XP(已测试)。这个 fo
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
tabs - 通过 chrome.tabs.create 打开多个选项卡时出现问题
我在使用 chrome.tabs.create 方法打开多个选项卡时遇到问题。我正在尝试使用 chrome.tabs.create 循环打开大约 9 个选项卡，但打开的选项卡数量仅限于 4 个。看起来
tabs - 如何自定义 Material UI Tabs 指示器的宽度和位置
我正在使用 Material ui 的标签，并且能够对标签的指示器进行更改。但是，我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧，并且给它一个宽度不会使
macos - v. Emacs 中的 TAB
我在 OS X 终端中使用 emacs 24.3，并且遇到了一些奇怪的事情。在 markdown-mode.el 中，tab 键通过 (define-key map (kbd "") 'markdo
tabs - 错误 : There is no clipping info for given tab
在 Chrome 开发者工具上 Uncaught (in promise) Error: There is no clipping info for given tab at E._handleRes
vim - 如何为:tab new，:tab，:tab设置快捷方式？
在vim中，我想将:tabnew缩短为:tn，将:tabp缩短为:th，将:tabn缩短为:tl在我的.vimrc中。知道我将如何重新映射这样的命令吗？最佳答案使用cabbrev： ca tn t
tabs - TabIndex - 点击选项卡将我移动到地址栏 - 无法使用焦点或 +tab 索引解决此问题
我读过几个主题，讨论 IE 中的地址栏在使用 TAB 时基本上是第一个获得焦点的主题(MSDN 自己的文档讨论了这一点)。然而，我也见过一些情况，但情况并不总是如此...... 我有一个母版页，内容

首页

博学

6Ren·AI

商城

twitter-bootstrap - Twitter Bootstrap 选项卡 : How to: Increase spacing between tabs