2
ブーストラップタブを追加してカードイメージを表示しました。画像を追加してモバイルで確認するまで、うまくいきました。モバイルでは、ブートストラップタブのカードイメージが画面の右端を超えています。
私は2つの問題が発生しています 1）デスクトップでは、画像が行の右端まで伸びていません 2）モバイルでは、画像が画面の右端を超えています。
私が間違って何をやっている
ここに私のbootplyう：？ http://www.bootply.com/IRDX7Ijl5I
ここに私のHTMLです：
<div class="content-section-c">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Sample Search Results</h2>
</div>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">APPLE<br>
TREES
</a></li>
<li><a href="#pane2" data-toggle="tab">ORANGE<br>TREES</a></li>
<li><a href="#pane3" data-toggle="tab">PEARS <br> TREES</a></li>
<li><a href="#pane4" data-toggle="tab">BANANAS</a></li>
<li><a href="#pane4" data-toggle="tab">GRAPE<br> TREES</a></li>
</ul>
<div class="tab-content">
<div id="pane1" class="tab-pane active">
<p>126 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
<div id="pane2" class="tab-pane">
<p>75 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/05_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/06_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/07_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/08_card.png"></div>
</div>
<div id="pane3" class="tab-pane">
<p>144 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/09_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/10_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/11_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/12_card.png"></div>
</div>
<div id="pane4" class="tab-pane">
<p>170 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
<div id="pane5" class="tab-pane">
<p>256 Results Founds</p>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/01_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/02_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/03_card.png"></div>
<div class="col-md-6 col-xs-12">
<img src="http://www.onvia.com/responsive/04_card.png"></div>
</div>
</div><!-- /.tab-content -->
</div><!-- /.tabbable -->
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-c -->
ここに私のCSSです：
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #e9a39c;
font-weight: bold;
}
.nav-tabs>li>a:hover{
border: 1px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover{
background-color: transparent;
}