0

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

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

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

我在我的项目中注意到它使用引导程序 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，但边框仍然没有呈现。

我完全希望看到卡周围有一个边框，但似乎无法让它工作。任何援助将不胜感激。

4

1 回答 1

3

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

于 2019-08-05T18:00:02.647 回答