Question

无法自定义引导程序的标签border-top - 在行后的绝对位置有100％宽度的空格。 http://jsfiddle.net/Vimpil/0mmv73oh/

li.active:after {
    position: absolute;
    width: 97%;
    padding: 1px;
    top: -1px;
    content: '';
    background: #000;
    height: 4px;
}

Answer 1

这个额外的空间是因为margin-right应用于Bootstrap默认样式中的链接。

您可以通过覆盖该样式或删除width并使用left: 0和right: 2px拉伸来解决此问题。

jQuery(function () {
    jQuery('#myTab a:last').tab('show')
})

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

li.active:after {
  position: absolute;
  padding: 1px;
  top: -1px;
  content: '';
  background: #000;
  height: 4px;
  right: 2px;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
  <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
  <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Message</div>
  <div class="tab-pane" id="settings">Settings</div>
</div>

无法自定义bootstraps选项卡的border-top - 在绝对位置具有100％宽度的空白区域

1 个答案: