Question

我们的软件UI设计师为我提供了一个网站图片，请我编写html。一世简要说明他的要求：

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

我想使用引导程序作为UI框架，并且我也是有关引导程序的新手。因为col没有浮点广播，如何归档？

Answer 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 < / p>

因此，子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>

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

是否可以在引导程序中实现col浮点数比？

2 个答案: