搜索
搜索

在Bootstrap选项卡周围添加边框

becca 发表于 Dev
59
贝卡

我正在使用Bootstrap选项卡标记，如下所示：

.nav-tabs {

    &.nav-tabs-alt {
        padding-top: 30px;

        li {
            a {
                color: @brand-info;
                font-size: 16px;
            }
        }

        li.active {

            a {
                background-color: #fff;
                color: @brand-primary !important;
                font-size: 16px;
            }
        }
    }
}

.tab-content {
    &.tab-content-alt {

    }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
            <li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
            <li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content tab-content-alt">
            <div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
            <div role="tabpanel" class="tab-pane fade" id="email">...</div>
        </div>

    </div>

  <script src="http://code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>

</html>

但是，如果边框包围了整个选项卡，我希望这样做，如下所示，但是在我的示例中，边框不流畅并且存在断点。有什么想法如何达到这个结果？

.nav-tabs {

    &.nav-tabs-alt {
        padding-top: 30px;

        li {
            a {
                color: @brand-info;
                font-size: 16px;
            }
        }

        li.active {

            a {
                background-color: #fff;
                color: @brand-primary !important;
                font-size: 16px;
            }
        }
    }
}

.tab-content.tab-content-alt {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-top-color:transparent;
        border-radius: 4px;
    }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
                        <li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
                        <li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content tab-content-alt">
                        <div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
                        <div role="tabpanel" class="tab-pane fade" id="email">...</div>
                    </div>

                </div>

  <script src="http://code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>

</html>

伊曼纽尔·洛佩兹（Emmanuel Lopez）

我不确定我是否知道，我只是将边界半径更改为零，这产生了流体容器的效果

.nav-tabs {

    &.nav-tabs-alt {
        padding-top: 30px;

        li {
            a {
                color: @brand-info;
                font-size: 16px;
            }
        }

        li.active {

            a {
                background-color: #fff;
                color: @brand-primary !important;
                font-size: 16px;
            }
        }
    }
}

.tab-content.tab-content-alt {
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-top-color:transparent;
        border-radius: 0px;
    }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
    <div>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
                        <li role="presentation" class="active"><a href="#call" aria-controls="home" role="tab" data-toggle="tab">Call Us</a></li>
                        <li role="presentation"><a href="#email" aria-controls="profile" role="tab" data-toggle="tab">Email Us</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content tab-content-alt">
                        <div role="tabpanel" class="tab-pane fade in active" id="call">...</div>
                        <div role="tabpanel" class="tab-pane fade" id="email">...</div>
                    </div>

                </div>

  <script src="http://code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用JQuery激活Bootstrap选项卡

Bootstrap 4中的滚动选项卡

在Bootstrap中激活单击的选项卡

使Bootstrap 3选项卡响应

AngularJS与Bootstrap选项卡冲突

AngularJS的Bootstrap选项卡

Bootstrap 4选项卡

选项卡的Bootstrap反向（深色）样式

具有自定义边框的Bootstrap选项卡

当Bootstrap 4中的选项卡处于活动状态时，如何将其添加到选项卡？

本机基本选项卡-任何想法如何删除选项卡周围的边框？

重设Ant-Design选项卡的活动选项卡底部边框的样式

如何在Bootstrap 4中为垂直选项卡设置透明右边框

带边框的选项卡菜单

Flutter：在选项卡上添加边框顶部

如何使Bootstrap Twitter的活动选项卡向下延伸以隐藏字段集边框？

嵌套选项卡-Twitter Bootstrap

jQuery Twitter Bootstrap选项卡选择

Bootstrap 3选项卡CSS定制

Bootstrap 3选项卡和列表

jQuery选项卡-内容显示在选项卡边框之外

Angular Bootstrap中的选项卡

是否可以在Bootstrap的活动选项卡中添加箭头？

向右拉时如何在Bootstrap动态导航栏选项卡上保留边框底部

Bootstrap选项卡的MixItUp问题

jQuery Bootstrap动态选项卡（添加和删除）

引导标签。通过 jquery 为当前选项卡添加边框

响应式 BootStrap 4 选项卡

删除选项卡组的底部边框

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档