Bootstrap - 卡片无法正常工作答案

【问题标题】：Bootstrap - Cards not working properlyBootstrap - 卡片无法正常工作
【发布时间】：2018-06-15 01:09:24
【问题描述】：

我正在关注此页面上第一个示例中的示例 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-->

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

【问题讨论】：

看不懂你想要什么..请多解释..

标签： php html twitter-bootstrap

【解决方案1】：

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

试试这个

.card-body{
  padding: 2rem;
}

<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>

【讨论】：

仍然不起作用，不会像网站示例中那样给出输出
你运行了我的 sn-p 吗？
是的，如果您查看我在问题中提供的链接，它仍然与网站不一样
现在试试，我认为您需要在内容中留出一些间距。您可以从图像调整它的宽度
另外你有多张卡片，你可以通过 max-width 属性来限制卡片。

【解决方案2】：

首先，它不是纯引导，你需要添加对mdb.min.css的引用（你可以从here下载它）。其次，您需要限制 div 的宽度。以 300 px 为例（您可以将其更改为您喜欢的任何内容）：

.card{
 width:300px;
}

我试过了，可以看到卡和网站一样。

【讨论】：

【解决方案3】：

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

<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-->

【讨论】：

【解决方案4】：

您必须从入门开始遵循教程，它们是内容之后的其他 css 类。例如容器流体等。确保您从一开始就遵循本教程，并确保您有正确的库链接到您的页面或下载并在本地尝试。它们是缺少的类，并且卡片类应该具有 box-shadow 属性，而 container-fluid 或 content-fluid 为该部分提供了适当的填充。希望对您有所帮助

【讨论】：

我同意了。它不是纯 Bootstrap。

【解决方案5】：

检查文件的顺序，首先需要 jquery，然后引导，然后应该包含 mdb 文件

<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>

【讨论】：

我认为主要问题不是引用 mdb.min.css 也不是设置 card div 的宽度，而不是 img-fluid 问题。
我已经更新了代码，并且工作正常。