為什么不能<a href>在BS導航選項卡的選項卡內容</a>中使<a href>鏈接“內聯”？</a>

Question

好的，我的網站上有一個引導nav-tabs ，但是我不能使<a href>鏈接進入inline ，而是僅僅停留在block 。 我試過通過內聯樣式設置display:inline ，這行不通（令人驚訝，哦，等等，不是，因為那太容易了）。

當我將a href標記設置為display:none時，內聯樣式有效，但是當我將display:inline樣式設置為display:inline樣式僅恢復為阻止狀態。

有什么建議么。

<ul class="nav nav-tabs">
  <li class="active"><a href="#test1" data-toggle="tab">Search our funds</a></li>
  <li class=""><a href="#test2" data-toggle="tab">Shares for a share price</a></li>
  <li class=""><a href="#test3" data-toggle="tab">Published fund research</a></li>
</ul>
<div class="tab-content">
  <div class="scroll-slide-pane tab-pane fade in active" id="test1">
    <div class="col-md-12">
      <div class="col-md-6">
        <h3>Search our funds</h3>
        <p>Search our range of available funds, or go to our<a href="#">advanced search.</a></p>
        <input class="fontAwesome" type="search" placeholder="&#xf002; Start typing here..." />
        <a href="#">View my recently searched funds</a>
      </div>
    </div>
  </div>
  <div class="scroll-slide-pane tab-pane fade in" id="test2">
    <div class="col-md-12">
      <div class="col-md-6">
        <h3>Search for a share price</h3>
        <p>Search for share price and stock information, or go to our <a href="#">advanced search option.</a></p>
        <input class="fontAwesome" type="search" placeholder="&#xf002; Search for share information..." />
        <a href="#">View recent searches</a>
      </div>
    </div>
  </div>
  <div class="tab-pane face in" id="test3">
    <div class="col-md-12">
      <div class="col-md-6">
        <h3>Published research</h3>
      </div>
    </div>
  </div>
</div>

.tab-content {
  height: 300px;
  width: 100%;
  background-color: #4F5DFF;
  color: white;
  padding: 5px;
  margin-top: -2px;
  padding-left: -5px;
  border-radius: 0px 0px 5px 5px;
  border-style: none;
}

.nav-tabs > li.active > a {
  background-color: #4F5DFF !important;
  color: white !important;
  border-radius: 0px !important;
}

.nav {
  border-style: none !important;
  border-bottom-style: solid;
  border-color: #4F5DFF !important;
}

.nav > li {
  border-radius: 0;
}

nav-tabs {
  margin-top: 15px;
  border-radius: 0;
  border-bottom-style: none;
}

.nav-tabs > li > a {
  border-radius: 0px;
}

Answer 1

引導程序中有一行可以做到：

.nav>li>a{
   display: block;
}

您應該以更高的特異性覆蓋此行。 因為已經很具體了，所以我將使用！important。 另一個選擇是簡單地將這行不帶！important的行放在您的css中，並將其加載到文檔中的bootstrap css文件之后 。

/*Bootstrap override*/
    .nav>li>a{
       display:inline !important;
    }

希望能幫助到你。