如何在 html css bootstrap 中创建以下附加模板

Question

我正在构建一个应用程序并被其中一个阻止程序卡住：

我想在 html/css/bootstrap 中创建如下模板。 我正在遵循的步骤：

我创建了一张卡片并将从数据库中获取并打印这些卡片上的值，但我不确定单击提交时如何将我的值存储在数据库中或将其作为对另一个页面的 POST 请求进行处理。有没有可能像表格一样与卡片一起使用？

我正在使用以下代码创建我的卡：

<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card" >
    <div class="card-header" color="black" ><h1 style="display: inline;">hello</h1> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <h1 style="display: inline;">hello</h1></div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
  </div>
</div>

如果有人可以指导我如何在不粘贴实际代码的情况下进行操作，那么我对前端非常陌生，并且可以在一定程度上帮助我。

Answer 1

这是您的问题的基本布局。你可以去添加额外的类来设置不同的列宽和布局。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form action="">
<div class="container">
  
  <div class="card" data-fareid="xyz123" data-price="15000" data-departure="22:10" data-arrival="23:25">
    <div class="card-header">Card header</h2></div>
    <div class="card-body">
        <div class="row">
          <div class="col"><img src="xyz.png"></div>
          <div class="col">22:10</div>
          <div class="col">01:15min</div>
          <div class="col">23:25</div>
          <div class="col">15.000</div>
        </div>
    </div>
    <div class="card-footer">Card footer</div>
  </div>
  
</div>
</form>