为标签

时间：2017-10-10 10:29:49

标签： twitter-bootstrap twitter-bootstrap-3

目标：
使被动标签具有另一种背景颜色。 选定的选项卡已基于预选的白色背景颜色。 在被动标签之间，它们之间应该有一条线，主动和被动标签之间应该是相同的颜色。

问题：
如何为被动标签创建背景颜色以及被动标签之间的线？

的信息：
*我使用Bootstrap 3
*我只使用油漆以显示下面的图片，以方便沟通 enter image description here

1 个答案:

答案 0 :(得分：0)

如果我理解正确的话。您需要在CSS中进行这些更改。

＆＃13;
＆＃13; 
.nav-tabs>li>a {
  background: #efefef ;
  margin-right: 0 !important;  
}

.nav-tabs>li>a:not(.active) {
  border-bottom: 1px solid #ddd;
}

.nav-tabs>li.active>a {
  background: #fff !important;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题