引导面板定位答案

【问题标题】：Bootstrap panel positioning引导面板定位
【发布时间】：2017-01-04 11:50:14
【问题描述】：

我有三个 div，即使经过数小时的研究，似乎也无法按照我想要的方式定位它。我正在使用引导行和列。

I have

What I want

没有一个类有固定的高度。

【问题讨论】：

这是因为高度问题，可能需要使用砌体插件
或者你需要设置成 2 行
请提供代码...检查一下 - bootply.com/tagged/masonry
添加您的代码。你试过什么？

标签： html css twitter-bootstrap class row

【解决方案1】：

您需要将屏幕分成两部分（6:6 或 7:5），然后在其中嵌套其他元素

.d1 {
    height: 100px;
    background: orange;
}
.d2 {
    height: 200px;
    background: lightgreen;
}
.d3 {
    height: 100px;
    background: gray;
}

<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-7">
        <div class="row">
          <div class="col-xs-12 d1"></div>
          <div class="col-xs-12 d3"></div>
        </div>
      </div>
      <div class="col-xs-5">
        <div class="row">
          <div class="col-xs-12 d2"></div>
        </div>
      </div>
    </div>
</div>

【讨论】：

【解决方案2】：

需要把A和C放在同一个col-xs-6中。

<div class="row">
  <div class="col-xs-6"> Container A, Container C</div>
  <div class="col-xs-6"> Container B </div>
</div>

【讨论】：

【解决方案3】：

试试这个代码。

HTML 代码

<table class="container">
  <tr>
    <td class="right">
      <div class="top">
        <div class="block"></div>
      </div>
      <div class="bottom">
        <div class="filler"></div>
        <div class="block"></div>
      </div>
    </td>
    <td class="left">
    </td>
  </tr>
</table>

CSS 代码

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.left {
  border: 1px solid #080808;
  width: 50%;
  height: 200px;
}

.right {
  height: 100%;
  width: 50%;
  padding-right: 3px;
}

.right .top {
  border: 1px solid #080808;
  height: 49%;
  width: 100%;
  vertical-align: top;
  margin-bottom: 3px;
}

.right .bottom {
  border: 1px solid #080808;
  height: 49%;
  width: 100%;
  vertical-align: bottom;
}

.block {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.filler {
  height: 100%;
  background: red;
  display: inline-block;
}

小提琴链接

Click here

【讨论】：