css - MDB Bootstrap 无法正常运行

标签 css html twitter-bootstrap model-view-controller

我正在使用默认布局和扩展它的另一个模板。我正在试用 mdb bootstrap 免费版,但它运行不正常。我认为在 head-layouts 文件中链接有问题。我也试过在本地安装但也没有用。也许我在这里遗漏了一些基本的东西。

布局:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>dataMS</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="styles/site.css" rel="stylesheet"/>
</head>

模板扩展布局-

<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-2" data-slide-to="1"></li>
    <li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <div class="view hm-black-light">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
            <div class="mask"></div>
        </div>
        <div class="carousel-caption">
            <h3 class="h3-responsive">Light mask</h3>
            <p>First text</p>
        </div>
    </div>
    <div class="carousel-item">
        <!--Mask color-->
        <div class="view hm-black-strong">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
            <div class="mask"></div>
        </div>
        <div class="carousel-caption">
            <h3 class="h3-responsive">Strong mask</h3>
            <p>Secondary text</p>
        </div>
    </div>
    <div class="carousel-item">
        <!--Mask color-->
        <div class="view hm-black-slight">
            <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
            <div class="mask"></div>
        </div>
        <div class="carousel-caption">
            <h3 class="h3-responsive">Slight mask</h3>
            <p>Third text</p>
        </div>
    </div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
<!--/.Controls-->

最佳答案

您使用的是 Bootstrap 3,而 MDB 基于 Bootstrap 4。B4 不向后兼容 Bootstrap 3,因此它不会工作。从这里下载新包: https://mdbootstrap.com/getting-started/

放置您的代码,它将起作用。我刚刚测试过它。

关于css - MDB Bootstrap 无法正常运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46930046/

相关文章:

css - 全宽和多列使用 flexbox

javascript - Ember.js Bootstrap 事件选项卡

css - 从 Controller 设置 body 的背景图像

javascript - fullpage.js 中奇怪的底部区域

html - 通过 CSS 更改 PNG 图像的颜色?

javascript - 将对象数组传递到另一个页面

html - Bootstrap - 如何将一行的 div 移动到另一行?

javascript - Bootstrap 模式弹出窗口不会关闭

css - 如何将纯 html 标签的样式定义为与另一个定义的样式相同?

javascript - 如何选择/取消选择表中的行?