为什么bootstrap不识别卡？答案

【问题标题】：Why bootstrap doesn't recognize card?为什么bootstrap不识别卡？
【发布时间】：2023-04-06 00:36:01
【问题描述】：

我已将引导程序添加到我的应用程序中，当我编写时

<div class="container-fluid">
    <div class="row" ng-repeat="user in users " style="border: 1px solid black"
         ng-click="goToUserDetails(user.Id)">
        <div class="col-md-4 text-center">{{user.Email}}</div>
        <div class="col-md-4 text-center">{{user.Name}}</div>
        <div class="col-md-4 text-center">{{user.Password}}</div>
        <div class="col-md-4 text-center">
            <span class="glyphicon glyphicon-trash" ng-click="delete(user.Id);$event.stopPropagation();">
            </span>
        </div>
    </div>
    <button class="btn btn-danger" ng-click="gotoAddUser()">Add</button>
</div>

它可以，但是当我想添加一张卡片时

<div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <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>

它无法识别引导程序“卡片”类（btn 有效）有人可以帮我吗？

【问题讨论】：

你使用 bootstrap 第 4 版样式表吗？

标签： c# angularjs asp.net-mvc bootstrapping web-frontend

【解决方案1】：

Bootstrap 3.3.6 或更低版本没有默认卡片设计。

所以现在设计卡只有两种选择。

标准方法是升级您的 Bootstrap 版本，例如将 3.3.6 或更低版本升级到 Bootstrap 4。Bootstrap 4 Card

--- 或 ---

如果您希望您的卡片设计与 Bootstrap 通用设计相同，请为卡片设计编写自己的样式表，然后您可以从 Bootstrap 4 Card 中选择该 CSS。在这种情况下，您可以只选择您的卡片实际需要的那些设计，而不需要任何其他额外的 CSS，因此它不会影响您的其他部分或模块。

【讨论】：