如何在自举模板中使图像响应

我知道这已经被问了很多，在发布这个问题之前我做了很多研究并尝试了很多，但似乎没有任何效果。我有两个图像和一个文本，我想在一行中显示。但是，当我减小窗口大小时，图像显示在文本的下方和上方，而不是旁边。我有以下的代码，这里是一个fiddle：如何在自举模板中使图像响应

<div class="row"> 
    <div class="col-md-4"> 
    <img src="image.jpg" class="images"> 
    </div> 
    <div class="col-md-4"> 
    <div class="text"> 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
      <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
    </div> 
</div> 
    <div class="col-md-4"> 
    <img src="image.jpg" alt="Chrome Browser" class="images"></div> 
</div>

如何使图像根据窗口大小，使图像和文本都在一行中显示的大小？

我试过width:100%;height auto;和max-width:100%;以及各种组合，以使它们响应，但它迄今为止没有任何工作。

在此先感谢！

来源

2015-11-16 Tom

您只需要将列大小从md更改为xs（col-md-4：col-xs-4）。

查看Docs。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="text"> 
 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
 

 
     <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-11-16 06:05:10 vanburen

您必须添加.img-responsive类的形象。这适用于max-width: 100%;, height: auto; and display: block;的图像，以便它很好地缩放到父元素。

欲了解更多信息： http://getbootstrap.com/css/#images

来源

2015-11-16 06:06:07 cweitat

尝试在图像DIV与 .col-xs-12 更换

来源

2015-11-16 06:08:08

您可以使用类 “COL-SM-4 COL-XS-12” 的股利和IMG响应图像类和风格属性显示：inline-block在img标签上以保持中心。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-xs-12""> 
 
     <img class="img-responsive" style="display:inline-block" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" /> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4"> 
 
     <div class="text"> 
 
     <h2 class="featurette-heading">What's Included with HTML?</h2> 
 

 
     <p class="lead">Tags to make words. And tons of CSS properties to style your page:</p> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-12""> 
 
     <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300" alt="Chrome Browser" class="images img-responsive" style="display:inline-block" /> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-11-16 08:30:06 Nikita

如何在自举模板中使图像响应

回答

相关问题