Question

我正在使用自举网格系统来格式化图片：

这是我的代码：

<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"放在<img>

上

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

但最终会像右图一样。如果我不使用class="img-responsive"，图像将显示完整的结果。我怎么解决这个问题？（请给我一个简单的解释，因为我是一个菜鸟:)）

Answer 1

您可以在.row＆amp;上应用 CSS Flexbox 规则.col-*-*。我使用了一些自定义类（所有.col-*-*都有一个名为.item的类）。像：

.row {
  display: flex;
}

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

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

请看下面的代码段：

.row {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
}

.item.left {
  flex-direction: row;
}

.item.left .well {
  width: 100%;
  align-self: stretch;
}

.item.left .well img {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="item left col-sm-4">
        <div class="well"><img  src="http://placehold.it/200x200" class="img-responsive">
        </div>
    </div>
    <div class="item col-sm-8">
        <div class="row">
            <div class="col-sm-6">
                <div class="well"><img  src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="well"><img  src="http://placehold.it/100x100" class="img-responsive" alt="Responsive image"></div>
            </div>
        </div>
    </div>
</div>

希望这有帮助！

Answer 2

您应该使用以下HTML结构，因为您需要具有相等宽度的左右列：

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="well"><img  src="..." class="img-responsive">
        <br>
        <br>
        <br>
        <br><br>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well"><img  src="..." class="img-responsive" alt="Responsive image"></div>
      <div class="well"><img  src="..." class="img-responsive" alt="Responsive image"></div>
    </div>
  </div>
</div>

bootstrap网格系统格式化图片

2 个答案: