Question

我是bootstrap的新手，我遇到了使用卡片和容器来包含其他元素的示例。有人可以解释一下这些差异以及何时使用它们？

Answer 1

我的回答将解释卡和容器之间的区别。

<强>集装箱

容器是最基本和最基本的引导组件之一。您可以将容器与其对应的行一起使用，以在网格中创建基本或复杂的内容方向。容器用于网站布局。 Documentation

<div class='container'>

<强>卡

Bootstrap v4中添加的卡片定义了一种显示内容的方式。尝试将容器可视化为内容对齐，将卡片视为内容结构和设计。 Documentation

<div class='card'>

虽然卡片在技术上是容器的核心，但更多的风格，两者都有完全不同的意图。

Answer 2

各个方面有两个截然不同的事情。

1）容器，我主要将其引用到＆＃34;容器＆＃34;的页面，所以当你开始创建任何你定义类似

的页面时

<html>
<head></head>
<body>
<div class="container"></div>
</body>
</html>

2）而卡：漂亮的组件，曾经有一些预定义的布局/结构，主要用作图像缩略图，手风琴，标签，通知，信息框，画廊和我也可以说盒

<html>
<head></head>
<body>
<div class="container">
<div class="cards">
<!-- card header -->
<!-- card body -->
</div>
</div>
</body>
</html>

Answer 3

卡是一个灵活且可扩展的内容容器。它包括页眉和页脚选项，各种内容，上下文背景颜色和强大的显示选项。例如：

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

查看Google Speech Recognition API Result is Empty了解详情。

对于容器，Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。使用.container作为响应式固定宽度容器。

<div class="container">
  ...
</div>

将.container-fluid用于全宽容器，跨越视口的整个宽度。

<div class="container-fluid">
  ...
</div>

查看Here了解详情。希望这有用

Bootstrap - 卡与容器

3 个答案: