How to bootstrap a cell to row-span=2?

问题

How to make via the boostrap way the red cell be row-span=2 (fill also the second row)?

.cell {height: 100px; border: 1px solid; border-collapse:collapse;}
.red {background: red;}
.yel {background: lightyellow;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>
<div class="col-xs-3 cell yel">content 1 -3</div>
<div class="col-xs-5 cell yel">content 2 -5</div>
<div class="col-xs-4 cell red">content 3 -4</div>
<div class="col-xs-5 cell yel">content 4 -5</div>
<div class="col-xs-3 cell yel">content 5 -3</div>

回答1:

2) Imitation using .pull-right & red row

.cell { min-height: 100px !important; outline: 1px solid; }
.red { background: red; }
.yel { background: lightyellow; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      rel="stylesheet"/>
      
<div class="container-fluid">
  <div class="row red">
    <div class="col-xs-3 cell yel">content 1 -3</div>
    <div class="col-xs-5 cell yel">content 2 -5</div>
    <div class="col-xs-4 pull-right">content 3 -4</div>
    <div class="col-xs-5 cell yel">content 4 -5</div>
    <div class="col-xs-3 cell yel">content 5 -3</div>
  </div>
</div>

1) Imitation using .pull-right & height: 200px;

1. You can use the .pull-right class to make this cell right-floating.
2. And increase the height of the cell.

.cell        { height: 100px; outline: 1px solid; }
.double-cell { height: 200px; outline: 1px solid; }
.red { background: red; }
.yel { background: lightyellow; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      rel="stylesheet"/>
      
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 cell yel">content 1 -3</div>
    <div class="col-xs-5 cell yel">content 2 -5</div>
    <div class="col-xs-4 double-cell red pull-right">content 3 -4</div>
    <div class="col-xs-5 cell yel">content 4 -5</div>
    <div class="col-xs-3 cell yel">content 5 -3</div>
  </div>
</div>

回答2:

Try this code.

Check working example at CODEPEN

HTML:

<div class="row">
  <div class="col-xs-8">
    <div class="row">
      <div class="col-xs-5 cell yel">content 1 -5</div>
      <div class="col-xs-7 cell yel">content 2 -7</div>
      <div class="col-xs-7 cell yel">content 4 -7</div>
      <div class="col-xs-5 cell yel">content 5 -5</div>
    </div>
  </div>
  <div class="col-xs-4 red">content 3 -4</div>
</div>

CSS:

.cell {
  height: 100px;
  border: 1px solid;
  border-collapse: collapse;
}

.red {
  background: red;
}

.yel {
  background: lightyellow;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

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

Hope it helps you.

Enjoy :)

来源：https://stackoverflow.com/questions/39397063/how-to-bootstrap-a-cell-to-row-span-2