如何将单元格引导到row-span = 2？

Question

如何通过boostrap方式制作红色单元格row-span=2（也填充第二行）？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这段代码。

查看 CODEPEN

上的工作示例

HTML：

Col.1 | Col.2 | Col.3 | Col.4 | Col.5 |  
12345 | ABCD  | 1A2B  | empty | empty |    
45678 | x1z2  | empty | empty | empty |

CSS：

<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>

希望它对你有所帮助。

享受：）

Answer 2

2）使用.pull-right＆amp;红行

.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）使用.pull-right＆amp; height: 200px;

1. 您可以使用the .pull-right class使此单元格正确浮动。
2. 并增加细胞的高度。

.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>