Question

目前，我想使用引导卡显示4张信息卡，但由于某些原因，它不起作用，因为我应该使用管理主题。

<div class="col-md-6">
    <form asp-action="LookupApi" asp-controller="Vessels" method="post">
        <div class="card card-success">
            <div class="card-header">
                <h3 class="card-title">IMO Lookup</h3>
            </div>
            <div class="card-body">
                <div class="form-group w-25">
                    <label for="example1">IMO Lookup Number</label>
                    <input type="text" class="form-control" name="imoNumber" id="imoNumber" placeholder="ImoNumber">
                    <button class="btn-primary">Lookup APi</button>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
         <div class="col-md-6">
             <div class="card card-success">
             <div class="card-header">
             <h3 class="card-title">Vessel Infomrmation</h3>
           </div>
           <div class="card-body">
          </div>
        </div>
        </div>
 <div class="col-md-6">
             <div class="card card-success">
             <div class="card-header">
              <h3 class="card-title">Third Information</h3>
           </div>
           <div class="card-body">
          </div>
        </div>
        </div>

             <div class="card card-success">
             <div class="card-header">
             <h3 class="card-title">Fourth Information</h3>
           </div>
           <div class="card-body">
          </div>
        </div>
        </div>

这至少正在产生我

x   x
    x

代替

x   x as this is a long form.
x

Answer 1

<div class="row">
   <div class="col-md-6">
     <div class="card">...</div>
   </div>

  <div class="col-md-6">
     <div class="card">...</div>
   </div>

   <div class="col-md-6">
     <div class="card">...</div>
   </div>

   <div class="col-md-6">
     <div class="card">...</div>
   </div>

</div>

应该可以，请确保将所有个人卡都放在同一行中的class为“ col-md-6”的“ div”中。

引导卡布局问题

1 个答案: