Bootstrap - 卡片与容器答案

【问题标题】：Bootstrap - Card vs ContainerBootstrap - 卡片与容器
【发布时间】：2017-07-13 08:32:13
【问题描述】：

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

【问题讨论】：

【解决方案1】：

我的回答会解释卡片和容器的区别。

容器

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

<div class='container'>

卡片

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

<div class='card'>

虽然从技术上讲，卡片的核心是容器，但风格稍多一些，但两者的意图完全不同。

【讨论】：

【解决方案2】：

从各个方面来看都是两个截然不同的东西。

1) Containers，我主要将其称为页面的“容器”，因此当您开始创建任何页面时，您可以定义类似这样的内容

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

【讨论】：

【解决方案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>

查看Here了解更多信息。

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

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

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

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

查看here 了解更多信息。希望对您有所帮助

【讨论】：