Question

我正在使用引导程序行创建模板，并且在行中嵌套了行，如下所示：

<div class="col-5">
         <div class="row">
            <div class="col-3 border border-secondary">Truck Number</div>
            <div class="col-4 border border-secondary">Trailer Number</div>
            <div class="col-5 border border-secondary">Seal Number(s)</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">Date:</div>
            <div class="col-6 border border-secondary">Time:</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">Customer Job No.:</div>
            <div class="col-6 border border-secondary">Customer P/O No.:</div>
         </div>
      </div>

我希望行延伸以占据列的整个高度。我试图使父列显示flex，这使行占据了列的整个高度，但是所有行都出现在同一行中，这不是我想要的。请运行我的代码段，其中我用红色突出显示了问题区域。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="billOfLadingContainer" id="element-to-print" style="background-color: white;">
   <div class="text-center">TEMPLATE MAIN</div>
   <div class="row">
      <div class="col-7 text-center" style="background-color: black;color: white;">SCHOOL</div>
      <div class="col-5">
         <div class="row">
            <div class="col-3 border border-secondary">SCHOOL</div>
            <div class="col-4 border border-secondary">Ta</div>
            <div class="col-5 border border-secondary">CD</div>
         </div>
      </div>
      <div class="col-4" style="border:1px solid black;">
         <div class="row">
            <div class="col-6">
               <img class="logo" src="img/logo.jpg">
            </div>
            <div class="col-6">
               <div>ADDRE1 </div>
               <div>ADDRE1 SD   287522</div>
               <div>ADDRE1 SD   287522</div>
               <div>ADDRE1 SD   287522</div>
            </div>
         </div>
      </div>
      <div class="col-3">
         <div class="row border border-secondary" style="height: 100%;">
            <div>Condition</div>
            <div>Sunday:______________</div>
            <div>Saturday:______________</div>
            <div>Monday:______________</div>
         </div>
      </div>
      <div class="col-5">
         <div class="row">
            <div class="col-3 border border-secondary">Bus Number</div>
            <div class="col-4 border border-secondary">Bus 2 Number</div>
            <div class="col-5 border border-secondary">Seal3 Number(s)</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">Date:</div>
            <div class="col-6 border border-secondary">Time:</div>
         </div>
         <div class="row">
            <div class="col-6 border border-secondary">School No.:</div>
            <div class="col-6 border border-secondary">School P/O No.:</div>
         </div>
         <div class="row" style="background:red">
            <div class="col-6 border border-secondary">Remove this space</div>
            
    
      </div>
   </div>
</div>

Answer 1

您的列很可能具有相同的高度（bootstrap 4 cols的默认行为）。使用h-100类（height:100%）使内部框填充所有cols的高度。

<div class="h-100">
       SCHOOL
</div>

我建议您使用table，因为您的结构是如此复杂。表格最适合您的情况。

使引导程序行在列内占据全高

1 个答案: