引导卡没有像示例中那样显示

Posted 2023-03-05

【中文标题】引导卡没有像示例中那样显示

【英文标题】：Bootstrap cards not showing like in examples

【发布时间】：2016-10-22 04:17:36

【问题描述】：

为什么我的引导卡看起来很奇怪？在示例中，它们看起来像带有边框和白色填充的卡片，但我的看起来只是没有填充和白色背景的文本。

例如：

我不知道代码是否对你有帮助，但这里是：

.container 
  left: 0;
  right: 0;
  bottom: -340px;
  text-align: middle;
  position: absolute;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="card">
        <img class="card-img-top" src="http://www.themdfactor.com/wp-content/uploads/2015/09/card1.jpg" >
        <div class="card-block">
          <h4 class="card-title">This is Card #1</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="http://v4-alpha.getbootstrap.com/components/card/" class="btn btn-primary">Learn More</a>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

也许您正在查看错误的文档...验证您的版本。这就是它在 v4 上的样子。 bootply.com/FaH0rKmUgg 和 v3 上的相同代码不起作用 bootply.com/2ofIwquKgf

感谢您使用 v4 工作，但它看起来仍然有点奇怪您知道我如何将它居中并显示在导航栏中而不是在中间吗？我必须把位置：绝对？

【参考方案1】：

如果您通过包管理器（例如 NPM）安装了引导程序：

对于某些包管理器，默认安装的版本是bootstrap@4.0.0-beta.2，它似乎没有此功能。

这可能会产生误导，因为 Bootstrap 的入门 > 下载部分中描述了正确的版本，found here

要解决此问题，请确保您引用的是最新的软件包版本 bootstrap@4.0.0-alpha.6

【参考方案2】：

Bootstrap 4 card 功能从早期的 v4-alpha 版本到 v4-beta 版本进行了额外的更改。但是，Bootstrap 网站上的示例仍然使用旧的类名。卡片仍会呈现，但如果使用较旧的类名，则填充会丢失。

使用card-body 类 (CSS) 的当前（2017 年 9 月）示例：

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." >
  <div class="card-body">
    <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">Go somewhere</a>
  </div>
</div>

这是similar answer 到related question。

【讨论】：

这与 bootstrap v4 答案相结合，应该是这个问题的确切答案。谢谢。

查找/替换 card-block 到 card-body 修复了我在 Bootstrap v4.0.0 中的所有填充问题。谢谢！

【参考方案3】：

将卡片 css 从 boostrap4 版本复制到您的 bootstrap3 解决方案中对我有用。如果你被困在 bootstrap3 上，那就太好了。

只需将以下内容放在您的 CSS 中的任何位置。

.card 
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;


.card-block 
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;


.card-title 
    margin-bottom: 0.75rem;


.card-subtitle 
    margin-top: -0.375rem;
    margin-bottom: 0;


.card-text:last-child 
    margin-bottom: 0;


.card-link:hover 
    text-decoration: none;


.card-link + .card-link 
    margin-left: 1.25rem;


.card > .list-group:first-child .list-group-item:first-child 
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;


.card > .list-group:last-child .list-group-item:last-child 
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;


.card-header 
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f7f7f9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);


.card-header:first-child 
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;


.card-footer 
    padding: 0.75rem 1.25rem;
    background-color: #f7f7f9;
    border-top: 1px solid rgba(0, 0, 0, 0.125);


.card-footer:last-child 
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);


.card-header-tabs 
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;


.card-header-pills 
    margin-right: -0.625rem;
    margin-left: -0.625rem;


.card-primary 
    background-color: #0275d8;
    border-color: #0275d8;


.card-primary .card-header,
.card-primary .card-footer 
    background-color: transparent;


.card-success 
    background-color: #5cb85c;
    border-color: #5cb85c;


.card-success .card-header,
.card-success .card-footer 
    background-color: transparent;


.card-info 
    background-color: #5bc0de;
    border-color: #5bc0de;


.card-info .card-header,
.card-info .card-footer 
    background-color: transparent;


.card-warning 
    background-color: #f0ad4e;
    border-color: #f0ad4e;


.card-warning .card-header,
.card-warning .card-footer 
    background-color: transparent;


.card-danger 
    background-color: #d9534f;
    border-color: #d9534f;


.card-danger .card-header,
.card-danger .card-footer 
    background-color: transparent;


.card-outline-primary 
    background-color: transparent;
    border-color: #0275d8;


.card-outline-secondary 
    background-color: transparent;
    border-color: #ccc;


.card-outline-info 
    background-color: transparent;
    border-color: #5bc0de;


.card-outline-success 
    background-color: transparent;
    border-color: #5cb85c;


.card-outline-warning 
    background-color: transparent;
    border-color: #f0ad4e;


.card-outline-danger 
    background-color: transparent;
    border-color: #d9534f;


.card-inverse 
    color: rgba(255, 255, 255, 0.65);


.card-inverse .card-header,
.card-inverse .card-footer 
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);


.card-inverse .card-header,
.card-inverse .card-footer,
.card-inverse .card-title,
.card-inverse .card-blockquote 
    color: #fff;


.card-inverse .card-link,
.card-inverse .card-text,
.card-inverse .card-subtitle,
.card-inverse .card-blockquote .blockquote-footer 
    color: rgba(255, 255, 255, 0.65);


.card-inverse .card-link:focus, .card-inverse .card-link:hover 
    color: #fff;


.card-blockquote 
    padding: 0;
    margin-bottom: 0;
    border-left: 0;


.card-img 
    border-radius: calc(0.25rem - 1px);


.card-img-overlay 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;


.card-img-top 
    border-top-right-radius: calc(0.25rem - 1px);
    border-top-left-radius: calc(0.25rem - 1px);


.card-img-bottom 
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);


@media (min-width: 576px) 
    .card-deck 
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    
    .card-deck .card 
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    
    .card-deck .card:not(:first-child) 
        margin-left: 15px;
    
    .card-deck .card:not(:last-child) 
        margin-right: 15px;
    


@media (min-width: 576px) 
    .card-group 
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    
    .card-group .card 
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    
    .card-group .card + .card 
        margin-left: 0;
        border-left: 0;
    
    .card-group .card:first-child 
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    
    .card-group .card:first-child .card-img-top 
        border-top-right-radius: 0;
    
    .card-group .card:first-child .card-img-bottom 
        border-bottom-right-radius: 0;
    
    .card-group .card:last-child 
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    
    .card-group .card:last-child .card-img-top 
        border-top-left-radius: 0;
    
    .card-group .card:last-child .card-img-bottom 
        border-bottom-left-radius: 0;
    
    .card-group .card:not(:first-child):not(:last-child) 
        border-radius: 0;
    
    .card-group .card:not(:first-child):not(:last-child) .card-img-top,
    .card-group .card:not(:first-child):not(:last-child) .card-img-bottom 
        border-radius: 0;
    


@media (min-width: 576px) 
    .card-columns 
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    
    .card-columns .card 
        display: inline-block;
        width: 100%;
        margin-bottom: 0.75rem;
    

来源：https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L4055

【参考方案4】：

这可能是旧的，但您是否有机会使用自定义引导文件？我最近尝试使用我们的自定义文件处理卡片，同样的事情也发生在我身上。然后我意识到引导文件中没有卡片类，自定义页面上也没有提到卡片。

http://getbootstrap.com/customize/

对我来说似乎很奇怪，不过我什至让同事验证了它。希望这会有所帮助。

【讨论】：

嘿 cymbal-table 我正在使用 bootstrap cdn :)。谢谢你的提问，但我很久以前就解决了这个问题:)

【参考方案5】：

我觉得很好。您必须确保链接的是版本 4 样式表。

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

【讨论】：

您无缘无故地在容器中使用绝对位置。删除您添加到容器中的 css 属性。如果你想让卡片居中，你需要做两件事。为卡片设置一个宽度，例如：300px，然后添加一个边距为：0 auto;显示：块；并在你的卡片包装中使用它。

此外，如果您只是为卡 css 引用 bootstrap 4，您应该使用 bootstrap 3 中的那个，它已经在您的索引中引用。它被称为缩略图：getbootstrap.com/components/#thumbnails-custom-content