在引导过程中能实现浮点比吗？
在引导过程中能实现浮点比吗？
提问于 2018-11-04 03:04:14
我们的软件UI设计师给我一个网站的形象，告诉我写的html。我对他的要求作了简要说明：
他想要这样的显示器，宽度比大概是5 : 3.5 : 3.5。
我想使用引导作为UI框架，我也是新手对引导。由于col没有浮点收音机，我如何存档？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-11-04 05:02:23
你可以这样把他们分开
由于您的预期比率是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>
Stack Overflow用户
发布于 2018-11-04 03:06:16
当您使用引导(如bellow )来实现列比率时，可以使用嵌套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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53137399
复制相关文章
相似问题
腾讯云开发者
