引导媒体对象图像在选项卡内没有响应答案

【问题标题】：Bootstrap's media object image is not responsive inside of tab引导媒体对象图像在选项卡内没有响应
【发布时间】：2014-01-27 01:55:15
【问题描述】：

我正在使用选项卡功能在每个选项卡内创建一系列特色菜，我有一个图像、一个标题和一些正文副本。我认为使用引导媒体对象组件会起作用，它确实如此，除非它被调整为移动设备。

当大小调整为可移动时，标题和正文副本将流过其容器，但图像将保持相同大小，从而破坏了设计。

有没有办法让图片调整大小，或者是否有一个修复方法可以让容器调整大小并使标题和正文副本放在图片下方？

代码请看jsfiddle：http://jsfiddle.net/DTcHh/126/

我是第一次使用，如有错误请见谅。提前谢谢你

<div class="container ">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" id="tabs-1">
            <ul class="nav nav-pills">
                <li class="active">
                    <a href="#panel-1" data-toggle="pill">Special 1</a>
                </li>
                <li>
                    <a href="#panel-2" data-toggle="pill">Special 2</a>
                </li>
                <li>
                    <a href="#panel-3" data-toggle="pill">Special 3</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active specials" id="panel-1">

                    <div class="media">
                      <a class="pull-left" href="#">
                          <img class="media-object img-responsive" src="http://i.imgur.com/SvujmcS.jpg" alt="240x240">
                      </a>
                      <div class="media-body ">
                        <h2 class="media-heading special-headline clearfix">Headline for special #1</h2></br><p class="special-paragraph clearfix
                        "> wow.lorem CSS. very placeholder. very generator. lorem dogescript. many ipsum.</p>
                      </div>
                    </div>
                </div>

                <div class="tab-pane" id="panel-2">
                    <p>
                        This is the special for #2.
                    </p>
                </div>
                <div class="tab-pane" id="panel-3">
                    <p>
                        The thrid Special.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript html css twitter-bootstrap responsive-design

【解决方案1】：

以下是一些模拟具有响应功能的媒体对象的解决方案。

基于媒体对象的解决方法：

<div class="media">
  <img class="pull-left img-responsive" src="http://i.imgur.com/SeO7616.png" style="max-width: 33.33%">
  <div class="media-body">
    <h2>Headline</h2>
    Content
  </div>
</div>

图像宽度由包含 DIV media 通过max-width 的百分比控制。此设置会覆盖 img-responsive 类中将 max-width 设置为 100% 的定义。

另一个基于网格系统的：

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img class="img-responsive" src="http://i.imgur.com/SeO7616.png">
    </div>
    <div class="col-xs-8">
      <h2>Headline</h2>
      Content
    </div>
  </div>
</div>

图像宽度本质上是随列缩放的。

这是基于克里斯蒂娜回答的简化：

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <img src="http://i.imgur.com/SeO7616.png" style="width: 100%">
    </div>
    <div class="col-xs-8">
      <h2>Headline</h2>
      Content
    </div>
  </div>
</div>

现场演示here.

【讨论】：

【解决方案2】：

引导媒体对象故意不响应。他们的标签也没有响应，我没有弄乱那些。如果您只是摆弄 css，它们会脱节。我会在胆量上使用网格，但那里有手风琴的响应式标签，效果更好https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

您必须使用网格系统进行此类设置：

演示：http://jsbin.com/odoTexeN/1/

http://jsbin.com/odoTexeN/1/edit

<div class="container ">
 <div class="row clearfix">
  <div class="col-md-12 column">
   <div class="tabbable" id="tabs-1">
    <ul class="nav nav-pills">
     <li class="active"> <a href="#panel-1" data-toggle="pill">Special 1</a> </li>
     <li> <a href="#panel-2" data-toggle="pill">Special 2</a> </li>
     <li> <a href="#panel-3" data-toggle="pill">Special 3</a> </li>
    </ul>
    <div class="tab-content">
     <div class="tab-pane active specials" id="panel-1">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #1</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
     <div class="tab-pane specials" id="panel-2">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #2</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
     <div class="tab-pane specials" id="panel-3">
      <div class="row">
       <div class="col-xs-6 col-sm-4">
        <a href="#"> <img class="img-fullwidth img-min-height-width-100" src="http://i.imgur.com/SvujmcS.jpg" alt="260x260"> </a>
       </div>
       <!--/col-*-4-->
       
       <div class="col-xs-6 col-sm-8">
        <h2 class="">Headline for special #3</h2>
       </div>
       <!--/col-*-8-->
      </div>
      <!--/row-->
     </div>
     <!--/tab-pane-->
     
    </div>
    <!--/tab-content 1 -->
    
   </div>
   <!--/tabbable -->
   
  </div>
  <!--/col-*-12 column -->
 </div>
 <!--/row-->
</div>
<!--/container-->

CSS

/* new
================================================== */   

/* image adjustments */
.img-fullwidth {
    width: 100%
}
.img-min-height-width-50 {
    min-height: 50px;
    min-width: 50px;
}
.specials h2 {
    font-size: 100%
}
@media (min-width:768px) { 
    .specials h2 {
        font-size: 160%
    }
}
/* tighten up the columns and use percentages for the gutter */
.specials .row {
    margin-left: -1.25%;
    margin-right: -1.25%;
}
.specials .row [class*="col-"] {
    padding-left: 1.25%;
    padding-right: 1.25%;
}

如果您想使用最小高度图像的类，也需要在 CSS 中进行更改。我这里写错了。

【讨论】：

【解决方案3】：

我实现了这样的目标......它对我有用

<div class="media"> 
<div class="pull-left visible-lg visible-md media-left"><img class="img-thumbnail media-object" src="img/newsletter/3-la.jpg" alt="img/newsletter/3-la.jpg"></div>
<div class="media-body">
<img class="hidden-lg hidden-md center-block img-responsive img-thumbnail media-object" src="img/newsletter/3-la.jpg" alt="img/newsletter/3-la.jpg"><br class="hidden-lg hidden-md">
<h4 class="roboto media-heading">“Tomorrow’s</h4>
<p>sasa</p>

</div>
</div>

“media-left”类将仅在 LG 和 MD 屏幕中可见，并且在较小的屏幕尺寸中，媒体主体中的 IMG 将显示自己...

【讨论】：