Question

我正在使用一个Web应用程序，它将在全屏模式下在800 x 480像素的屏幕上运行。我的应用程序是使用ReactJS的单页应用程序，顶部有一个简单的导航栏，并带有2x2排列的4个引导卡。代码如下：

<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像素限制。有什么解决方案可以改变卡的紧密度，而又不改变卡的边距和填充成分吗？

Answer 1

问题在于您的.card-body类直接位于您的.card-deck类的下面；您会错过两者之间的核心.card类。

您的.card-deck应该包含多个 .card元素，它们是 Bootstrap cards 本身的核心。这些.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>

引导卡可悲的局限性

1 个答案: