Question

我添加了boostrap标签以显示一些卡片图像。它工作正常，直到我添加图像并在移动设备上检查。

我遇到了两个问题。 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;
}

Answer 1

您是否在寻找能够调整自身尺寸以适应正在观看的设备的图像？

您可能希望将img-responsive类添加到图片代码中，例如：

<img class="img-responsive" src="http://www.onvia.com/responsive/03_card.png">

在移动设备上，引导标签上的卡片图像会延伸到屏幕的右边缘

1 个答案: