Question

我正在关注此页面https://mdbootstrap.com/components/cards/上的第一个示例的考试（试图获得相同的输出）

<!--Card-->
    <div class="card">
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    
    </div>
    <!--/.Card-->

然而，我得到的只是这个？任何建议

Answer 1

我添加了一个不同的bootstrap链接，希望这符合您的要求

试试这个

＆＃13;

.card-body{
  padding: 2rem;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<div class="container">
<!--Card-->
    <div class="card">
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" width="550rem" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    
    </div>
    <!--/.Card-->
    </div>

＆＃13;

Answer 2

首先，它不是纯粹的引导程序，您需要添加对mdb.min.css的引用（您可以从here下载它）。其次，您需要限制div的宽度。比如300 px（你可以把它变成你喜欢的任何东西）：

.card{
 width:300px;
}

我试过了，可以看到该卡与网站相同。

Answer 3

您没有在父div中设置任何宽度。这就是为什么div自动显示全宽的原因。首先，您需要添加宽度，如下面的代码或使用col-md-*

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css">

<!--Card-->
    <div class="card" style="width: 23rem;">
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    
    </div>
    <!--/.Card-->

＆＃13;

Answer 4

你必须按照教程开始，他们是内容之后的其他css类。例如容器流体等。确保从一开始就按照教程进行操作，确保您的库链接正确到您的页面或下载并在本地尝试。它们是缺少的类，卡类应该具有box-shadow属性，而容器流体或内容流体为该部分提供适当的填充。希望这个帮助

Answer 5

检查文件的顺序，包括首先需要jquery然后是bootstrap，之后应该包含mdb文件

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='section'>
    <!--Card-->

    <div class="card" style='width:23rem;'>
    
        <!--Card image-->
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
    
        <!--Card content-->
        <div class="card-body">
            <!--Title-->
            <h4 class="card-title">Card title</h4>
            <!--Text-->
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    
    </div>
    <!--/.Card-->
    </div>
    </div>

＆＃13;

Bootstrap - 卡无法正常工作

5 个答案: