Question

我有以下

<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Text that<br>literally<br>spans<br>4 lines
      </p>
    </div>
  </div>
</div>

和css

.box-cell
{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}

所以我面临的问题是其中一个细胞通常比另一个细胞高。我有什么方法可以平衡每个细胞占多少的高度？搜索并没有让我知道我可以操纵哪个属性来获得相同的高度:(

Here is jsfiddle 然而，在这个小提琴中，我不能让它们并肩来证明我的观点

编辑：我想我没有正确指定它。我希望边界与最高的牢房一样高。因此，这里提供的所有示例实际上都取出了边框，而是为背景着色。如果我这样做那么是的，它会让每个细胞的幻觉都相同，但我希望它有一个相同高度的边界。

Answer 1

我尝试了replicating what it sounds like you are looking for.

我建议你把flexbox搞得一团糟，因为它似乎完全符合您的要求。

<div class="myc">
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
    <div class="col">
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>
      <p>Text of some sorts</p>

    </div>
  </div>

对于CSS

.myc {
  display: flex;
}

.col {
  background-color: yellow;
  margin-right: 20px;
}

Answer 2

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	

<div class="row">
  <div class="col-xs-12 col-sm-4" style="background-color: green">
  some content
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: orange">
  some content
  <img src="http://placehold.it/100x120">
  </div>
  <div class="col-xs-6 col-sm-4" style="background-color: magenta">
  some of content
  </div>
</div>

Answer 3

解决它的一些选项： Different Tricks on How to Make Bootstrap Columns All the Same Height

Answer 4

<style type="text/css">
.box-cell{
    position:        relative;
    margin:          3px;
    border-style:    groove ridge ridge groove;
    border-width:    3px;
    background-size: cover;
}
</style>    
<div class="row">
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        Slightly short text
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <div class = "box-cell">
      <p>
        <span>Text that</span>
        <span>literally</span>
        <span>s4 lines</span>
        <span>ygthfg</span>
      </p>
    </div>
  </div>
</div>

1-您需要在span标记中添加文字。 2-或者将文字放在一行中。

高度相等的引导单元格

4 个答案: