问

Bootstrap的媒体对象图像在选项卡内部没有响应

 weiwei 发布于 2023-02-05 09:35
  • bootstrap
  • 容器
  • js
  • http
  • ci
  • object

    • 我正在使用tab功能在每个选项卡中创建一系列特殊内容我有一个图像,一个标题和一些正文副本.我认为使用bootstraps媒体对象组件可以工作,除非它被调整为移动设备.

    当大小移动时,标题和正文副本将流过其容器,但图像将保持相同的大小,从而破坏了设计.

    有没有办法使图像调整大小,或者是否有一个修复程序允许容器调整大小并使标题和正文副本下降到图像下方？

    请参阅jsfiddle获取代码:http://jsfiddle.net/DTcHh/126/

    我是第一次使用,抱歉任何错误.先感谢您

    

    
    
    
        
    
            
            
    
                
    

                    
    
                      
                          240x240
                      
                      
    
                        
    Headline for special #1

     wow.lorem CSS. very placeholder. very generator. lorem dogescript. many ipsum.
    
                      
    
                    
    
                
    

                
    
                    
    
                        This is the special for #2.
                    
    
                
    
                
    
                    
    
                        The thrid Special.

    Season.. 6

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

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

      
  
  
      
    
      Headline
      
    Content

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

      另一个基于网格系统:

      
  
      
    
      
      
    
      
    
      
      
      Headline
      
      Content

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

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

      
  
      
    
      
      
    
      
    
      
      
      Headline
      
      Content

    现场演示这里.

    1 个回答

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

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

        <div class="media">
  <img class="pull-left img-responsive" src="http://i.imgur.com/SeO7616.png" >
  <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" >
    </div>
    <div class="col-xs-8">
      <h2>Headline</h2>
      Content
    </div>
  </div>
</div>

      现场演示这里.

      2023-02-05 09:40 回答
    撰写答案
    今天，你开发时遇到什么问题呢？
    立即提问
    热门标签
    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有