twitter-bootstrap - 「nav-tabs」の丸い角を削除 (Bootstrap)

Question

Bootstrap でタブ (class="nab-tabs") の丸みを帯びた角を削除する方法がわかりません。

例: http://i.imgur.com/ho7rX.png

助けてください

ありがとう

Answer 1

この行を CSS に追加します

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

またはあなたの場合：

.nab-tabs > li > a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

編集: 21-03-2018

BS4.0 には、公式のブートストラップ オーバーライドにrounded-0を追加する別の方法があります。これが実際の例です。

<div class="container">
  <div class="row">
    <div class="col-8 ml-auto mr-auto my-5 ">
      <ul class="nav nav-tabs ">
        <li class="nav-item ">
          <a class="nav-link active rounded-0" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link rounded-0 disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Bootstrap 4 では、 を使用できます.nav-tabs-nostyle。例えば：

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <div class="nav navbar-nav nav-tabs-nostyle">
    <a href="#one" class="nav-item nav-link" data-toggle="tab">One</a>
    <a href="#two" class="nav-item nav-link" data-toggle="tab">Two</a>
    <a href="#three" class="nav-item nav-link" data-toggle="tab">Three</a>
  </div>
</nav>

Answer 3

CSS ファイルを調べて .nav-tabs エントリを探し、次を探します。

-webkit-border-radius
 -moz-border-radius
      border-radius

それらをすべて 0 に設定します。

編集：

この「フラット」、「メトロ」スタイル バージョンなどのテーマ バージョンに置き換えることもできます。

http://bootswatch.com/cosmo/#buttons