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

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

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%的定义.

2. 另一个基于网格系统:

   <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>
   

   图像宽度基本上与列缩放.

3. 这是基于克里斯蒂娜答案的简化:

   <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>
   

现场演示这里.

Answer 2

Bootstrap 媒体对象故意不响应。他们的选项卡也没有响应，我没有搞乱这些。如果你只是摆弄 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 中进行更改。我这里说的不对。