bootstrap Tabの枠線について

Question

現在グループ制作でbootstrap3.3を使用したモバイルアプリの開発を行っております。
そこでどんな画面でも大きさを可変で変えられるグリッドシステムを導入したタブを作成したのですが、枠線をグリッドシステムで指定したら本体のタブの右側に微妙な隙間が空いてしまいました・・・。（イメージ図で見ると微妙な違いですが）

こちらがbootstrapを使用したコードです。

<div class="container">
        <div class="row">
            <ul class="nav nav-tabs text-center" role="tablist">
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #8cc6d9; padding:0;"><a href="#tab1" data-toggle="tab" class="custom_tab">北海道</a><li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #9da1cb; padding:0;"><a href="#tab2" data-toggle="tab" class="custom_tab custom_tab2">東北</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #bbda8a; padding:0;"><a href="#tab3" data-toggle="tab" class="custom_tab custom_tab3">関東</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #da8e9a; padding:0;"><a href="#tab4" data-toggle="tab" class="custom_tab custom_tab4">中部</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #d9ab72; padding:0;"><a href="#tab5" data-toggle="tab" class="custom_tab custom_tab5">近畿</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #bc90c0; padding:0;"><a href="#tab6" data-toggle="tab" class="custom_tab custom_tab6">中国</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #6e85b8; padding:0;"><a href="#tab7" data-toggle="tab" class="custom_tab custom_tab7">四国</a></li>
                <li class="col-xs-6 col-sm-3 col-md-6" style="border: 4px solid #e5b7b6; padding:0;"><a href="#tab8" data-toggle="tab" class="custom_tab custom_tab8">九州</a></li>
                
            </ul>

小さい隙間ですがどうにか埋められないでしょうか？もし心当たりや解決策がありましたらお願いします。

Answer 1

Bootstrap3.3の.nav-tabs>li>aのスタイルが残っているのが原因ではないでしょうか？

/* bootstrap.css */
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

恐らくmargin-rightが一番の原因だと思いますので、このタブに独自のidかclassを与えてcssで元のスタイルを上書きするのが良いかと思います。

<div class="container">
  <div class="row">
    <!-- デフォルトのスタイルに影響を与えないようにidかclass名をつけてあげます。 -->
    <ul class="myNavTabs nav nav-tabs text-center" role="tablist">
      <li class="myTab myTab-Hokkaido col-xs-6 col-sm-3 col-md-6"><a href="#tab1" data-toggle="tab" class="custom_tab">北海道</a><li>
      <li class="myTab myTab-Tohoku col-xs-6 col-sm-3 col-md-6"><a href="#tab2" data-toggle="tab" class="custom_tab custom_tab2">東北</a></li>
      <li class="myTab myTab-Kanto col-xs-6 col-sm-3 col-md-6"><a href="#tab3" data-toggle="tab" class="custom_tab custom_tab3">関東</a></li>
      <li class="myTab myTab-Chubu col-xs-6 col-sm-3 col-md-6"><a href="#tab4" data-toggle="tab" class="custom_tab custom_tab4">中部</a></li>
      <li class="myTab myTab-Kinki col-xs-6 col-sm-3 col-md-6"><a href="#tab5" data-toggle="tab" class="custom_tab custom_tab5">近畿</a></li>
      <li class="myTab myTab-Chugoku col-xs-6 col-sm-3 col-md-6"><a href="#tab6" data-toggle="tab" class="custom_tab custom_tab6">中国</a></li>
      <li class="myTab myTab-Shikoku col-xs-6 col-sm-3 col-md-6"><a href="#tab7" data-toggle="tab" class="custom_tab custom_tab7">四国</a></li>
      <li class="myTab myTab-Kyushu col-xs-6 col-sm-3 col-md-6"><a href="#tab8" data-toggle="tab" class="custom_tab custom_tab8">九州</a></li>
    </ul>

.myNavTabs > li.mayTab > a {
  margin: 0;
  border: none;
  border-radius: 0;
}

/* styleはcssに分離した方が良いかと。 */
.myNavTabs > li.myTab {
  padding:0;
  border: 4px solid transparent;
}
.myNavTabs > li.myTab-Hokkaido {
  border-color: #8cc6d9;
}
.myNavTabs > li.myTab-Tohoku {
  border-color: #9da1cb;
}
.myNavTabs > li.myTab-Kanto {
  border-color: #bbda8a;
}
.myNavTabs > li.myTab-Chubu {
  border-color: #da8e9a;
}
.myNavTabs > li.myTab-Kinki {
  border-color: #d9ab72;
}
.myNavTabs > li.myTab-Chugoku {
  border-color: #bc90c0;
}
.myNavTabs > li.myTab-Shikoku {
  border-color: #6e85b8;
}
.myNavTabs > li.myTab-Kyushu {
  border-color: #e5b7b6;
}

borderもborder-radiusもデザイン的に不要っぽいのでこれらも打ち消してもよいかもです。