Html 引导网格系统格式化图片

我使用引导网格系统格式化图片，如：

这是我的代码：

<div class="row">
    <div class="col-md-4">
        <div class="well"><img  src="..." class="img-responsive"">
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well"><img  src="..." class="img-responsive" alt="Responsive image"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well"><img  src="..." class="img-responsive" alt="Responsive image"></div>
            </div>
        </div>
    </div>
</div>

---

但最终的结果是正确的。如果我不使用

class=“img responsive”

图像将在完整结果中显示。我怎么解决这个问题？（请给我一个简单的解释，因为我是一个noob:）

您应该使用以下

HTML

结构，因为您需要宽度相等的左右列：

<img  src="..." class="img-responsive" alt="Responsive image">

//内容。。。。
//内容。。。。

您可以在

.row

和

.col-*-*

上应用CSS Flexbox规则。我使用了一些自定义类（所有

.col-*-*

都有一个名为

.item

的类）。比如：

请看下面的代码片段：

.row{
显示器：flex；
}
.项目{
显示器：flex；
弯曲方向：立柱；
}
.项目.左{
弯曲方向：行；
}
.item.left.嗯{
宽度：100%；
自我调整：伸展；
}
.item.left.well img{
身高：100%；
}

---

代码工作得很好，但当我使用相同的结果图片（1920x1080）进行测试时，结果并不好。所以我必须把我的照片做成合适的尺寸？比如在这个例子中？

<div class="container">
  <div class="row">
    <div class="col-xs-6">
        // content....
    </div>
    <div class="col-xs-6">
       // content....
    </div>
  </div>
</div>

.row {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
}

.item.left {
  flex-direction: row;
}