Bootstrap的媒体对象图像在选项卡中不响应

Question

我正在使用tab函数来创建一系列的特色菜，在每个选项卡中我都有一个图像、一个标题和一些正文副本。我认为使用bootstraps媒体对象组件会起作用，它确实起作用了，除非它被调整到移动端。

当大小调整为移动时，标题和正文副本将溢出其容器，但图像将保持相同的大小，破坏设计。

有没有办法调整图像的大小，或者有没有修复方法允许容器调整大小，并使头部和正文副本放置在图像下方？

请参阅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>

Answer 1

Bootstrap Media对象故意不响应。他们的标签页也没有响应，我没有弄乱它们。如果你只是摆弄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中对其进行更改。我在这里弄错了。

Answer 2

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

1. 基于媒体的变通方法基于网格系统的变通方法：
2. 这是基于Christina的答案的简化：

实时演示.

Answer 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屏幕上可见，在较小的屏幕尺寸中，媒体-body中的IMG将显示自己...