如何使用CSS

Question

在右下角的div添加图片我目前使用的引导v3.3.4使用此选项卡... CSS：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { 
    color: #fff; 
    cursor: default; 
    background-color: #92278f; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #92278f; 
    -moz-border-top-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-bottom-colors: #92278f; 
    -moz-border-left-colors: none; 
    border-image: none; 
} 
.nav-tabs { 
    border-bottom: 4px solid #92278f; 
} 

DOM：

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a></li> 
    <li><a href="#student" data-toggle="tab">Student</a></li> 
</ul> 

我的电流输出：

如何添加这一形象：

在底部，变成这样吗？

Answer 1

我已经更新您的标记与引导的匹配。我将图像添加到内容面板而不是ul.nav-tabs

不需要图像的附加标记。完成使用伪元素:after。

<!-- Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"> 
 

 
<!-- Scripts --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<!-- Loading custom CSS after bootstrap's --> 
 
<style> 
 
    .nav-tabs > li.active > a, 
 
    .nav-tabs > li.active > a:hover, 
 
    .nav-tabs > li.active > a:focus { 
 
    color: #fff; 
 
    cursor: default; 
 
    background-color: #92278f; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: #92278f; 
 
    -moz-border-top-colors: none; 
 
    -moz-border-right-colors: none; 
 
    -moz-border-bottom-colors: #92278f; 
 
    -moz-border-left-colors: none; 
 
    border-image: none; 
 
    } 
 
    .nav-tabs { 
 
    border-bottom: 4px solid #92278f; 
 
    } 
 
    /*THE CHANGES I MADE*/ 
 
    .tab-pane { 
 
    position: relative; 
 
    } 
 
    .tab-pane:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 41px; 
 
    height: 23px; 
 
    background: url(http://i.stack.imgur.com/XYs3f.png); 
 
    right: 0; 
 
    } 
 
</style> 
 

 
<div role="tabpanel"> 
 
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
 
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a> 
 
    </li> 
 
    <li><a href="#student" data-toggle="tab">Student</a> 
 
    </li> 
 
    </ul> 
 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="parent">Parent Tab Content</div> 
 
    <div role="tabpanel" class="tab-pane" id="student">Student Tab Content</div> 
 
    </div> 
 
</div>

Answer 2

1.设置父元素的UL为“的位置是：相对于”的的 2.加一个新的div作为UL作为同级“的位置是：绝对的;背景：图像URL” 3.adjust的 '顶' 和CSS图像DIV的 '正确' 因此

<div style="position: relative">  
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
     <li class="active"><a href="#parent" data-toggle="tab">Parent</a></li> 
     <li><a href="#student" data-toggle="tab">Student</a></li> 
    </ul> 
    <div style="position: absolute;background:(imageurl);top:10px;right:0px"/> 
</div> 

Answer 3

CSS唯一的解决办法。

您无法对无序列表（ul）的底部边框进行修改。相反，在标签下添加一个div，并在它之前添加三角形。

/*to make the triange*/ 
 
.row:before { 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    
 
    border-style: solid; 
 
    border-width: 0 41px 23px 0; /*width and height*/ 
 
    border-color: transparent #92278F transparent transparent; 
 
} 
 

 
/*chnage active tab color and bottom border*/ 
 
.nav-tabs { 
 
    border-bottom: 4px solid #92278F !important; 
 
} 
 
.nav-tabs>li.active>a, 
 
.nav-tabs>li.active>a:focus, 
 
.nav-tabs>li.active>a:hover { 
 
    background-color: #92278F !important; 
 
    color: white !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
 
    <li class="active"><a href="#parent" data-toggle="tab">Parent</a> 
 
    </li> 
 
    <li><a href="#student" data-toggle="tab">Student</a> 
 
    </li> 
 
</ul> 
 
<div class="row"> 
 
    <div class="col-md-3"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>