html - 使用 Bootstrap 以响应方式添加图像和其他元素

Question

我正在尝试以特定方式放置一些 html 元素。但是当我第一次添加图像时，它的大小没有改变。

我添加了 .img-rounded1 { float:left;高度:60%!重要； width:30% !important} 更改图片属性。

还尝试使用 float:left;高度:60%!重要； width:30% !important 内联图像标签。但没有帮助。

fiddle :http://jsfiddle.net/karimkhan/dZTh6/2/

我想显示这样的元素:

我应该在 content1 div 中使用什么布局？我应该使用 4 列的表格还是更好的方法来做到这一点？

Answer 1

我不确定我是否理解你的意思。

如果你想让图片和它的父图片一样宽，你必须添加 img-responsive(它会使用 max-width: 100%;):

<img src="http://placehold.it/931x754"  alt="..." class="img-responsive img-rounded">

之前的解决方案会做一个“列式”布局。

http://jsfiddle.net/dZTh6/6/

您还可以使用列和行的组合进行布局。

但是您必须考虑将图像 float 在其容器内，以便“文本”(或围绕它的任何内容填充空间)。 ，并将图像 float 在容器内。

如果你想为第一个内容做一个列布局，为第二个内容做一个行，检查这个代码: http://jsfiddle.net/dZTh6/5/

您可能想要删除 col-xs-* 类提供的填充。