标签: bootstrap-cards

我正在使用Bootstrap 4 alpha 2并利用卡片.具体来说,我正在使用官方文档中的这个示例.正如标题所说,我怎样才能让所有牌都高度相同？

编辑:我现在可以想到的是设置以下CSS规则:

.card {
    min-height: 200px;
}

但这只是一个硬编码的解决方案,在一般情况下不起作用.我视图中的代码与文档中的代码相同,即:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small …

为什么我的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>

我正在尝试使用 Bootstrap 4 卡片布局自定义卡片列。但是，如果我在 css 文件中编写此代码，为什么会显示错误？

VS 代码中显示错误：规则@include css(unknownatrules) 处未知

HTML 文件

<div class="card-columns">
  <div class="card" *ngFor="let item of vision">
    <div class="card-header">{{item.heading}}</div>
    <carousel [showIndicators]="false">
      <slide *ngFor="let item of vision">
        <img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image">
      </slide>
    </carousel>
  </div>
</div>

CSS文件

<div class="card-columns">
  <div class="card" *ngFor="let item of vision">
    <div class="card-header">{{item.heading}}</div>
    <carousel [showIndicators]="false">
      <slide *ngFor="let item of vision">
        <img class="card-img-top embed-responsive embed-responsive-16by9" [src]="item.img" alt="vision image">
      </slide>
    </carousel>
  </div>
</div>

我想将一些内容放在 Bootstrap 4 卡中，并在上面有一个拉伸链接。我还想在这张卡片中包含一个按钮，它的 URL 与拉伸链接不同。

Bootstrap 的文档说：

不建议使用拉伸链接使用多个链接和点击目标。但是，如果需要，某些位置和 z-index 样式可以提供帮助。

但我无法让它工作。

我尝试过将按钮的 z-index 设置为 5000 之类的方法，但它仍然无法点击。

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col align-self-center">
                    <h5 class="card-title">This is a card</h5>
                    <h6 class="card-subtitle mb-2 text-muted">It has a button in it</h6>
                    <p class="card-text">How do I make the button rise up above the stretched link?</p>
                </div>
                <div class="col-auto align-self-center">
                    <a class="btn btn-primary" href="https://www.stackoverflow.com" role="button">Button Link</a>
                </div>
                <a href="https://www.duckduckgo.com" class="stretched-link"></a>
            </div>
        </div>
    </div>

卡片示例

我想让它可以点击按钮，而不会被拉伸的链接覆盖。

有小费吗？

我使用引导程序创建了一张卡片。我打算在该卡中插入一个包含数据的表格。

我的问题是，当缩小屏幕（检查响应能力）时，表中的数据从卡中出来。

我该如何解决我的这个问题，有人可以帮助我吗？

谢谢

演示版

.HTML

<div style="width:40%">
    <div class="card">
        <div class="card-header header">
            <h1>My Table</h1>
        </div>
        <table class="card-table table-borderless myTable" style="overflow-y: auto; overflow-x: auto;">
            <thead>
                <tr>
                    <th scope="col tableTitles">Title</th>
                    <th scope="col tableTitles">Name</th>
                    <th scope="col tableTitles">ID</th>
                    <th scope="col tableTitles">Street</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let pr of Data; let  a = index;" class="tableColor">

                    <td class="tableTitles">
                        {{pr.title}}
                    </td>
                    <td class="tableTitles">
                        {{pr.name}}
                    </td>
                    <td class="tableTitles">
                        {{pr.id}}
                    </td>
                    <td class="tableTitles">
                        {{pr.street}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

。CS

.card {
    margin-top: 16px;
    margin-left: 16px;
    height: …