2

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

我的代码是使用 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;
  }

我希望在页面中创建以下结构： 布局

4

1 回答 1

0

如果您不太关心支持旧版浏览器，则可以Flexible Box在第二行使用 CSS3 布局。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>

然后将display值设置为.flex：

.flex {
  display: flex;
}

这将为您提供与您的插图类似的东西。这是一个小提琴演示供您查看。http://jsfiddle.net/yongchuc/xbjca5z1/

于 2015-08-27T22:49:23.933 回答