Question

我有一个小问题。我正在尝试添加一个句子，然后在句子旁边显示引导标签。如您所见，该句子位于选项卡内，但我不想要它。如何让这个句子出现在选项卡的正面，但不会在不影响设计的情况下出现在选项卡中？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row"><!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
	<li class="active" role=""><a aria-controls="home" data-toggle="" href="" role="tab">View different career opportunities</a></li>
	<li class="active" role="presentation"><a aria-controls="home" data-toggle="tab" href="#articles" role="tab">1</a></li>

Answer 1

将其移出并用span（使用类tabtitle）

包装

同时关闭代码</ul></div>

要更改标签高度（覆盖引导程序）：

.nav>li>a {
    padding: 5px 15px !important;
}

.tabtitle {
  float: left;
  margin: 5px 10px 0px 25px;
}


.nav>li>a {
    padding: 5px 15px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <span class="tabtitle">View different career opportunities</span>
    <li class="active" role="presentation"><a aria-controls="home" data-toggle="tab" href="#articles" role="tab">1</a></li>
  </ul>
</div>

修改引导选项卡以包含句子，但不显示在选项卡内

1 个答案:

要更改标签高度（覆盖引导程序）：