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

本文介绍了如何将单元格引导到 row-span=2?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何通过boostrap方式使红细胞为row-span=2(同时填充第二行)?

.cell {height: 100px;边框:1px 实心；边框折叠:折叠；}.red {背景:红色；}.yel {背景:浅黄色；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="样式表"/><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>

解决方案

2) 模仿使用 `.pull-right` &红排

.cell { min-height: 100px !important;轮廓:1px 实心；}.red { 背景:红色；}.yel { 背景:浅黄色；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="样式表"/><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>

1) 模仿使用 .pull-right &高度:200px;

您可以使用.pull-right 类使该单元格向右浮动.

并增加单元格的高度.

.cell { height: 100px;轮廓:1px 实心；}.double-cell { 高度:200px;轮廓:1px 实心；}.red { 背景:红色；}.yel { 背景:浅黄色；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="样式表"/><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>

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

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;

You can use the .pull-right class to make this cell right-floating.

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>

这篇关于如何将单元格引导到 row-span=2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

RIGHT