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

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

基于媒体对象的变通方法：

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

Answer 2

Bootstrap Media对象无法有效响应。他们的标签也没有响应，我没有弄乱那些。如果你只是摆弄css，他们会脱节。我会在胆量上使用网格，但有响应式选项卡可以更好地使用手风琴https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

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

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

Class＆＃34; media-left＆＃34;将仅在LG和MD屏幕中可见，并且在较低的屏幕尺寸中，媒体中的IMG将显示...

引导程序媒体对象图像在选项卡内部没有响应

3 个答案:

DEMO：http://jsbin.com/odoTexeN/1/