是否可以在 bootstrap 中实现 col 浮点比率？答案

【问题标题】：Is it possible to realize the col floating point ratio in bootstrap?是否可以在 bootstrap 中实现 col 浮点比率？
【发布时间】：2018-11-04 13:02:23
【问题描述】：

我们的软件 UI 设计师给了我一张网站图片，告诉我写 html。我简要说明他的要求：

他想要这样的显示，宽度比例大概5 : 3.5 : 3.5。

我想使用引导程序作为 UI 框架，我也是引导程序的新手。因为col 没有浮点收音机，我该如何存档？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以像这样拆分他们

由于您的预期比率是5:3.5:3.5，因此添加两个最小比率3.5 + 3.5 = 7

现在5:7 5 + 7 = 12 由于引导网格系统具有12 grids，您可以使用5 + 7 列并将column 7 拆分为两个等效的col-sm-6

所以现在孩子col-sm-6的宽度比为3.5 + 3.5

.half-width > div{
            width:48%; 
            margin-right:2%;
            }
.half-width > div:last-child{
            margin:0;
            }
div{ 
    margin:0; 
    padding:0; 
    color:#fff; 
    text-align:center;
    padding-top:50px;
    }
div .col-sm-7, div .col-xs-7{
    padding:0; 
    margin:0;
    }
div .col-sm-5, div .col-xs-5{
     padding-right:1%; 
     padding-top:0;
     }

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-sm-5 col-xs-5">
<div style="height:150px; background:red;">1</div>
</div>
<div class="col-sm-7 col-xs-7 half-width">
<div class="col-sm-6 col-xs-6" style="height:150px; background:red;">2
</div>
<div class="col-sm-6 col-xs-6" style="height:150px; background:red;">3
</div>
</div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

你可以使用嵌套row当你使用下面的引导来实现列比例：

    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div style="background-color: #eee; min-height: 100px;">5</div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <div style="background-color: #eee; min-height: 100px;">3.5</div>
                    </div>

                    <div class="col-md-6">
                        <div style="background-color: #eee; min-height: 100px;">3.5</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

【讨论】：