代码之家 › 专栏 › 技术社区 › bitshift

什么是引导卡块类?

twitter-bootstrap

bitshift · 技术社区 · 7 年前

我看不到这门课 card-block 在参考文档中提到过,但我在几个示例中看到了这个类的使用。这是官方参考:

https://getbootstrap.com/docs/4.0/components/card/

这是一个使用类的示例:

https://www.codeply.com/go/pVsGQZVVtG/bootstrap-4-no-gutters-(spacing)

卡座 班

<div class="row">
  <div class="col-3">
    <div class="card">
      <div class="card-block">
        normal
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
      <div class="card-block">
        normal
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <div class="card-block">
        normal
      </div>
    </div>
  </div>
</div>

1 回复 | 直到 7 年前

Shidersz 6 年前

这个 card-block 类用于一个 α释放 版本 引导程序4 并且在当前版本中不存在。您可以在以下链接上阅读该类的文档: card-block on v4-Alpha . 有人说:

.card-block . 只要你需要卡片中的填充部分,就可以使用它。

v4.1.3版本 或者另一个更高级的版本。您可以在下一个示例中使用浏览器检查器工具进行检查,查看是否没有 CSS 与主题相关的样式 卡座 类,但存在与正式文档相关的样式,例如 card-header 或 card-body 上课。

cards : Bootstrap Cards

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">

  <div class="card">
    <div class="card-block">
    card-block
    </div>
  </div>
  <br>
  <div class="card">
    <div class="card-header">
      card-header
    </div>
    <div class="card-body">
      card-body
    </div>
  </div>

</div>

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前