按水平顺序放置引导卡答案

【问题标题】：Place bootstrap cards in horizantal order按水平顺序放置引导卡
【发布时间】：2021-03-12 17:05:07
【问题描述】：

我有一个带有导航栏 + 一个主体 div + 一个页脚的简单页面。

我想要实现的是导航栏和页脚无论如何都保持在那个位置，而只有主要的空白区域显示这些引导卡，但在水平位置每行最多 4 个。到目前为止我管理的是：

 <div="wrap> 
      <navbar boostrap>
     </navbar>
     <form>
        <div class="card">
        </div>
     </form>
    </div>
   <footer>
   </footer>

并将此 css 应用于 wrap div 和页脚：

WRAP：

.wrap {
  min-height: 100%;
  margin-bottom: -12vh;
  padding-bottom: 12vh;
}

页脚：

.footer {
  text-align: center;
  height: 12vh;
  width: 100%;
  background-color: #393e46;
}

我之后做的是在我的表单中添加一个类来封装 bootsrap 卡并在 css 中这样做：

.form-events {
  display: flex;
  flex-wrap: wrap;
}

有更好的做法还是我的解决方案有效？？

【问题讨论】：

标签： html css node.js twitter-bootstrap crud

【解决方案1】：

如果您使用的是Bootstrap，可以尝试如下操作。保持导航栏和页脚不变。您唯一需要处理的是主要的空白部分。

首先创建一个<div></div>，它有一个container类，例如<div class="container"></div>
然后你可以再放一个<div></div<元素，它的类为row，这样你的卡片就会水平放置在同一行<div class="row"></div>
接下来，您可以使用 Bootstrap 提供的 col 类为您的每张卡片 <div class="col"></div> 创建一个 div 元素。它基本上用于定义单行中需要多少元素，并使您的内容具有响应性。如果您需要更多详细信息，请务必在此处查看文档：Bootstrap Grid System
终于可以放卡了。请记住在每个 <div class="col"></div> 中包装一张卡片
您可以在下面找到我如何做到这一点的代码示例。在 full page 中运行 sn-p 以水平查看卡片；否则，由于屏幕尺寸的原因，它将显示然后堆叠在一起

根据我的经验，我建议使用 div 的 container 类来放入您的元素，尤其是卡片元素。

JSFiddle Demo Here

编辑：如果您在调整大小时遇到卡片堆叠在一起的问题，请将它们全部包装在 "card deck" 类中的 <div> 元素中

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>

<body>
<div class="container mt-5">
<div class="row ">

<div class="card-deck">

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
</div>


</div>
</div>
</body>
</html>

【讨论】：

嗯，是的，这似乎有效，但在你的情况下，在我屏幕上的某个位置，每张卡片的内容在垂直堆叠之前相互重叠。

【解决方案2】：

您可以像这样将position:fixed 行添加到您的“.footer” CSS 类中。

 .footer {
    position:fixed;
    bottom:0;
    left:0;
    text-align: center;
    height: 12vh;
    width: 100%;
    background-color: #393e46;
   }

通过这样做，即使用户向下滚动页面，它也会保持在页面底部。

【讨论】：