gpt4 book ai didi

html - 在 Bootstrap 选项卡周围添加边框

转载 作者:太空宇宙 更新时间:2023-11-04 10:00:09 25 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

我不确定我是否理解了这个想法,我只是将 border-radius 更改为零,这就产生了流体容器的效果

.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>

关于html - 在 Bootstrap 选项卡周围添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38400270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com