Можно ли реализовать коэффициент с плавающей запятой в начальной загрузке? - PullRequest
Новая
       8

Можно ли реализовать коэффициент с плавающей запятой в начальной загрузке?

0 голосов
/ 04 ноября 2018

Наш дизайнер программного обеспечения предоставит мне изображение веб-сайта, скажите мне написать HTML. я сделать краткое описание его требования:

enter image description here

он хочет, чтобы дисплей был таким, соотношение ширины, вероятно, 5 : 3.5 : 3.5.

Я хочу использовать bootstrap в качестве инфраструктуры пользовательского интерфейса, и я также новичок в начальной загрузке. поскольку col не имеет радио с плавающей точкой, как я могу заархивировать это?

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

Вы можете разделить их вот так

Поскольку ожидаемое соотношение составляет 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>
0 голосов
/ 04 ноября 2018

Вы можете использовать вложенный 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>
...