无法在引导 4 alpha 中获取高度属性以工作

我正在学习 Bootstrap，但我无法让 v4 中的 height 属性(例如："row h-25"(工作。

我尝试添加另一个 CSS，它将"容器流体"以及 html 和 body 的高度设置为 100%，有人在另一个答案中提出了作为解决方案。恐怕还是行不通。我正在使用Visual Studio，当我打开"NuGet - 解决方案"时，它说引导程序版本是"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>

自定义.css：

.container-fluid {
    height: 100%;
}
html, body {
    height: 100%;
}

Bootstrap 4 alpha 适用于 h-25 class。您必须设置父元素的高度，即以 px、rem 或 em 为单位的容器流体。不要以百分比添加父高度。

.container-fluid {
    min-height: 200px ;
}

最佳做法是将样式添加到父元素中的自定义类，而不是将样式应用于引导核心类。

h-类

(如h-25(类是在 Bootstrap Alpha v6 中引入的，因此您需要升级 Bootstrap 版本才能使用这些类。

看起来 NuGet 引用是 Bootstrap 4 的较旧 alpha 版本。截至目前，最新版本是4.0.0-beta2。

在 VS NuGet 包管理器中(右键单击解决方案并选择"管理解决方案的 NuGet 包..."(，应会看到包有更新。如果没有，请确保选中"包括预发行版"复选框。

相关内容

最新更新

热门标签：