php - Bootstrap - 卡无法正常工作

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 链接，希望这符合您的要求

试试这个

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