bootstrapのタブメニューがうまくレスポンシブしない

Question

tab.jsは動いているようですが、cssがどうもうまく効かなくてリストとメニューがズレます。
日本語リファレンスを参考にしました。

理想

実際(※点線はありで問題なし。実線は消したい)

html

<div class="box4">
<div class="col-md-12">
<!-- タブ・メニュー -->
<ul class="nav nav-tabs nav-justified" >
	<li role="presentation" class="active"><a href="#content01" data-toggle="tab">新着情報</a></li>
	<li role="presentation" style="background-color: #cccccc;"><a href="#content02" data-toggle="tab">プレスリリース</a></li>
	<li role="presentation" style="background-color: #999999;"><a href="#content03" data-toggle="tab">イベント・セミナー</a></li>
	<li role="presentation" style="background-color: #666666;"><a href="#content04" data-toggle="tab">研究活動報告</a></li>
</ul>

<!-- タブ内容 -->
<div class="tab-content">
	<div class="tab-pane active" id="content01">
		<div>
	<div class="news">
		<ul>
			<li><a href="#"><time datetime="2017-12-12">2017年12月12日</time>おしらせ1</a></li>
			<li><a href="#"><time datetime="2017-12-11">2017年12月11日</time>おしらせ2</a></li>
			<li><a href="#"><time datetime="2017-12-10">2017年12月10日</time>おしらせ3</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ4</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ5</a></li>
		</ul>
	</div>
		</div>
	</div>
	<div class="tab-pane" id="content02">
		<div>
	<div class="news">
		<ul>
			<li><a href="#"><time datetime="2017-12-12">2017年12月12日</time>おしらせA</a></li>
			<li><a href="#"><time datetime="2017-12-11">2017年12月11日</time>おしらせ2</a></li>
			<li><a href="#"><time datetime="2017-12-10">2017年12月10日</time>おしらせ3</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ4</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ5</a></li>
		</ul>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="content03">
		<div>
		<div class="news">
		<ul>
			<li><a href="#"><time datetime="2017-12-12">2017年12月12日</time>おしらせB</a></li>
			<li><a href="#"><time datetime="2017-12-11">2017年12月11日</time>おしらせ2</a></li>
			<li><a href="#"><time datetime="2017-12-10">2017年12月10日</time>おしらせ3</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ4</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ5</a></li>
		</ul>
	</div>
	</div>
	</div>
	<div class="tab-pane" id="content04">
		<div>
		<div class="news">
		<ul>
			<li><a href="#"><time datetime="2017-12-12">2017年12月12日</time>おしらせC</a></li>
			<li><a href="#"><time datetime="2017-12-11">2017年12月11日</time>おしらせ2</a></li>
			<li><a href="#"><time datetime="2017-12-10">2017年12月10日</time>おしらせ3</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ4</a></li>
			<li><a href="#"><time datetime="2017-12-9">2017年12月 9日</time>おしらせ5</a></li>
		</ul>
	</div>
	</div>
	</div>
</div>
</div>

CSS

/* box4 */
.box4 {
    background-color:#ffffff;
    width: 100%;
}

	
/* tabmenu extended */
.nav-tabs {
	font-size:1.3em;
	margin:10px auto;
    width:100%;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
	background-color: #ffffff;
	border-bottom-color: transparent;
	border:none;
	margin:auto;
    width:100%;
}


.nav-tabs>li.active>a:hover {
	background-color: #ffffff;
	border-bottom-color: transparent;
	border:none;
	margin:auto;
    width:100%;
}

.nav-tabs>li>a {
	border:none;
	border-radius:0;
	margin-right:0;
	border-right:1px solid #838383;
	background-color: #F0F0F0;
	padding:12px 14px;

}

div.tab-content {
	min-width:100%;
	padding:1em;
	border-top:none;
   	display: flex;
	justify-content: center;
	flex-wrap: wrap;
    flex: 1;


}
div.tab-content ul {
	margin:0;
}

返信はこの後明日午前中以降になりますが、よろしければご教示いただけると幸甚に存じます。
何卒よろしくお願い致します。

●2018/02/09更新
実は他の人が途中まで書いたソースを引き継いだため、時々見落としがあったりします。最初に明記すべきでしたすみません。
また、通常container(或いはcontainer-fluid)+rowの中にコンテンツを置くべきなのでしょうが、背景をブラウザ幅の目いっぱいに表示する都合もあり、やむなく各段落毎にrowを入れて閉じている仕様にしています。

伸縮してもここだけ固定になっている状態で、タブの色は無理やりstyleで入れましたが繁栄されないです。(タブの被りはひとまずおきます)
liのmargin:auto;とwidth:100%;は別途入れ子にしたほうがよいのでしょうか…

Comments

[x_x]

Bootstrapのバージョンはいくつでしょうか？

[Lhankor_Mhy]

「実線は消したい」とのことですが、ご自分が書かれたCSSで .nav-tabs>li>a { border-right:1px solid #838383;} と指定しているようです。ご確認ください。

[Lhankor_Mhy]

もう1点。「うまくレスポンシブしない」とのことですが、これはこの「実線は消したい」のことと考えてよろしいですか？

[pixiewired]

バージョンは4.0.0です。

[pixiewired]

実は他の人が途中まで書いたソースを引き継いだので時々見落としがあります。ご指摘ありがとうございます。

[Lhankor_Mhy]

ご解決されたということでよろしいのでしょうか？

[Lhankor_Mhy]

追記を見ても問題が分からないのですが…… x_xさんのご回答で解決したならいいのですが、まだ解決していないなら、「cssがどうもうまく効かなくて」ではなく「こうなっているところをこうしたい」と書かないと伝わらないのでは？　読み取れていないのが私だけだったら申し訳ないのです。

Answer 1

参考にしているサイトはBootstrap3のものです。4で大きく変わっているので、4を使うなら参考にしないでください。
https://getbootstrap.com/docs/4.0/components/navs/#tabs

  <ul class="nav nav-tabs nav-fill" role="tablist">
    <li role="presentation" class="nav-item"><a class="nav-link active" href="#content01" data-toggle="tab">新着情報</a></li>
<!-- 以下略 -->

(ulにnav-fill追加、liにnav-item追加、aにnav-link追加。activeはaに移動。)

Answer 2

申し訳ございません。結局解決せず、他の手段を取りました。