1
부트 스트랩을 배우고 있으며 v4에서 높이 속성 (예 : "행 h-25")을 사용할 수 없습니다.부트 스트랩 4 알파에서 높이 속성을 사용할 수 없습니다.
"컨테이너 - 유체"의 높이와 html 및 본문을 100 %로 설정하는 또 다른 CSS를 추가하려고 시도했습니다. 누군가 다른 답변에서 해결책으로 제안했습니다. 아직도 작동하지 않는다, 나는 두렵다. 저는 Visual Studio를 사용하고 있으며, "NuGet - Solution"을 열면 부트 스트랩 버전이 'v4.0.0-alpha'라고합니다.
도움을 주시면 감사하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color: #e7fdd6">
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer</p><!-- These are just rough drafts while I learn the grid system. --></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects</p></div>
</div>
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer-slider</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power amount</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects-slider</p></div>
</div>
<div class="row h-25">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="Content/picture.jpg" alt="Park" align="middle" /> <!-- Bilde --></div>
</div>
<div class="row h-25">
<div class="col-lg-6 col-md-6-col-sm-12 col-xs-12"><!-- Graph 1 --></div>
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!-- Graph 2 --></div>
</div>
</div>
</body>
</html>
custom.css :
.container-fluid {
height: 100%;
}
html, body {
height: 100%;
}
이것은 최소 높이가 아니라 높이가 컨테이너에 설정되어야하는 문제입니다. 감사합니다. Klooven에게도 감사드립니다. 부트 스트랩의 아름다움처럼 보였던 것은 xs, sm 등 다양한 장치 크기로 쉽게 프로그램 할 수 있다는 것이었지만 정확한 픽셀 높이를 설정해야만했습니다. 이것으로 베스트 프랙티스? – HonningKake