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

Question

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

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

我创建了一张卡片，并将从这些卡片上的 DB 获取和打印值，但我不确定单击提交将如何将我的值存储在 db 中或将其作为对另一个页面的 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>