如何在引导 4 卡上添加边框

Posted 2023-03-06

【中文标题】如何在引导 4 卡上添加边框

【英文标题】：How to add border on bootstrap 4 cards

【发布时间】：2019-12-13 04:44:10

【问题描述】：

我是 bootstrap 新手，我想将卡片添加到启动新 ASP.NET MVC 项目时搭建的默认索引页面

我的理解是引导程序在卡片上包含一个边框。但是，当我运行应用程序时，卡片边框没有呈现。

当然，我搜索了网络，并在 SO 上找到了这两个相关的问题： Bootstrap cards not showing like in examples What is the '.well' equivalent class in Bootstrap 4

我在我的项目中注意到它使用 bootstrap V3 加载。使用 NuGet，我卸载了 v3 并安装了 Bootstrap V4。我确保在 Bundle.config 文件中也加载了正确的文件。仍然没有渲染边框。

这是我的 html 代码，它基于创建项目时生成的默认索引页面：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

<div class="row">
  <div class="col-md-4">
    <div class="card border">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <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="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    ...
  </div>
  <div class="col-md-4">
    ...
  </div>
</div>

我更改的代码位于该行的第一列。 （其他列中的省略号表示由 Visual Studio 生成的代码）。我添加了边框类，但没有在 Chrome 中绘制边框。我也尝试过添加边框border-primary，但边框仍然没有呈现。

我完全希望在卡片周围看到边框，但似乎无法使其正常工作。任何帮助将不胜感激。

【问题讨论】：

你确定你已经给了div的正确类名是卡片边框吗？如果没有，请确保在它们之间使用 - 来获得答案。

你覆盖了任何类吗？我相信引导程序默认会在卡片上呈现边框。见bootstrap.build/app

【参考方案1】：

我得到了这个工作。添加border 类似乎是问题所在。我可能需要重新编译才能将版本 4 放入可执行文件中，但无论如何，使用 Bootstrap 网站上文档中的示例呈现了边框。将border-primary 类添加到card 元素成功更改了颜色。我认为关键的教训是需要 Bootstrap 版本 4 并且 VS 加载 Bootstrap 版本 3。