html - 为 6 个单元格配置 Bootstrap 以自动适应具有响应图像的全屏

Question

我正在尝试获得一个网格，该网格允许我有一个带有图标等 Angular 的中心旋转木马。

我的代码使用的是 Bootstrap 3 @ http://www.bootply.com/Mbi11Tfvq5#

我无法让中心单元格响应并拉入以允许底行显示。该图像创建了一个滚动条。

我做错了什么？

<div class="container">
  <div class="row">
      <div class="col-sm-1 f">ax</div>
      <div class="col-sm-10 f">b</div>
      <div class="col-sm-1 f">ay</div>
  </div>

    <div class="row">
      <div class="col-sm-1 f">am</div>
      <div class="col-sm-10 f">
        <img class="img-responsive" src="http://dummyimage.com/3200x3200.png">
      </div>
      <div class="col-sm-1 f">an</div>
  </div>

    <div class="row">
      <div class="col-sm-1 f">ah</div>
      <div class="col-sm-10 f">b</div>
      <div class="col-sm-1 f">ai</div>
  </div>
 </div>

CSS

    /* CSS used here will be applied after bootstrap.css */
.f {
    border-style: solid;
    border-width: 1px;
    border-color: #000 ;
  }

.y {
  background: yellow ;
  }

.x {
    hight: auto;
  }

我希望在页面中创建以下结构:

Answer 1

如果您不太关心是否支持旧版浏览器，您可以对第二行使用 CSS3 Flexible Box 布局。 flex 布局的定义方面是能够改变其元素的宽度和/或高度以最好地填充任何显示设备上的可用空间。 flex 容器扩展元素以填充可用的可用空间，或收缩它们以防止溢出。

您的第二行看起来像这样:

  <div class="row flex">
      <div class="col-sm-1 blue">am</div>
      <div class="col-sm-10">
        <img class="img-responsive" src="http://dummyimage.com/3200x3200.png">
      </div>
      <div class="col-sm-1 blue">an</div>
  </div>

然后将 .flex 的 display 值设置为如下内容:

.flex {
  display: flex;
}

这会给你一些类似于你的插图的东西。这是一个 fiddle 演示供您查看。 http://jsfiddle.net/yongchuc/xbjca5z1/