时间戳

首页 > 解决方案 > 不超过边界的引导卡填充

css - 不超过边界的引导卡填充

问题描述

我正在开发一个可以在全屏模式下在 800 x 480 像素屏幕上运行的网络应用程序。我的应用程序是使用 ReactJS 的单页应用程序，顶部有一个简单的导航栏，以及 4 个 2x2 排列的引导卡。代码就像：

<div class="nav-bar">Component</div>
<div class="card-deck">
    <div class="card-body"> Something-1</div>
    <div class="card-body"> Something-2</div>
</div>
<div class="card-deck">
    <div class="card-body"> Something-3</div>
    <div class="card-body"> Something-4</div>
</div>

问题是，Something-3 和 Something-4 卡中有一些东西（！）超过了我的 480 像素限制。有没有什么解决方案可以在不改变卡片成分的边距和填充的情况下改变卡片的松紧度？

标签： csstwitter-bootstrapbootstrap-4

解决方案

问题是您的.card-body课程直接在您的课程之下.card-deck；你错过了.card两者之间的核心课程。

您.card-deck应该包含多个 .card元素，这些元素本身就是核心引导卡。这些.card元素包含（.card-body通常又包含类.card-title和.card-text）。

如果设置正确，卡片中包含多少内容并不重要；它只会溢出以包含它。

这可以在下面看到：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis auctor accumsan. Cras eu purus quis dui tempus finibus. Quisque et suscipit mi. Mauris maximus nisi vitae blandit interdum. Etiam interdum felis nec sapien tristique, nec sollicitudin urna ornare. Integer magna orci, scelerisque at fermentum nec, tempor id purus. Phasellus suscipit tempus odio, sit amet aliquam arcu varius at. Sed rutrum pellentesque tortor, id pharetra ante euismod nec. </p>
    </div>
  </div>
</div>

推荐阅读