Bootstrap卡在示例中没有显示

Question

为什么我的Bootstrap卡看起来很奇怪？在这些例子中,他们看起来像一个带有边框和白色填充卡,但我的模样只有文字没有填充和白色背景.

例如:

我不知道代码是否会对你有所帮助,但这里是:

HTML:

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

CSS:

<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" alt="Card image cap">
        <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>

Answer 1

所述自举4卡功能已经历了从早期的V4-α(诸)版本到V4-β版本的其他变化.但是,Bootstrap网站上的示例仍使用较旧的类名.卡仍然呈现,但如果使用较旧的类名,则填充将丢失.

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

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

下面是一个类似的答案,以一个相关的问题.

Answer 2

它显示我很好.您必须确保链接版本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">

Answer 3

将来自boostrap4版本的卡css复制到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