如何将单元格引导到 row-span=2? [英] How to bootstrap a cell to 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;

1. 您可以使用.pull-right 类 使该单元格向右浮动.
2. 并增加单元格的高度.

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

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>

解决方案

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>

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