如果我输入class="col"，它会减小表的宽度，因为有很多列，所以每厘米都很重要。
如果我将其设置为class="row"，尽管我应用了class="row d-flex flex-wrap align-items-center align-items-stretch，但它不会垂直拉伸，因此我可以充分利用屏幕中的空间。当此设置为row
时
下面是html的一部分：
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</script>
</head>
<div class="col" id="tableDiv">
<div class="row">
<div id="po-items" class="table-responsive">
<div class="card" id="card">
<table class="table table-hover table-vcenter" id="dtable">
<thead>
<tr>
<th style="width:18%">Tela</th>
<th style="width:2%; display:none">Name</th>
<th style="width:15%">Color</th>
<th style="width:10%">Pantone</th>
<th style="width:15%">Contenido</th>
<th style="width:2%; display:none">Construction</th>
<th style="width:7%">Acho (m)</th>
<th style="width:5%">Peso (gsm)</th>
<th style="width:7%">Precio/m (USD)</th>
<th style="width:8%">Metros (m)</th>
<th style="width:10%">Precio Total sin IVA (COP)</th>
<th style="width:5%">Sel.</th>
</tr>
</thead>
<tbody id="tableRows">
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Black"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="406" onchange="add_to_total(this)"></td>
<td class="total_price">$2,686.24</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="19677 D.Moss"></td>
<td style="display:none">R</td>
<td><input type="text" name="tableInputs" value="Iron Gate"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 recycled poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.61636045" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="265" onchange="add_to_total(this)"></td>
<td class="total_price">$1,753.34</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="tableInputs" value="15094 D.Moss"></td>
<td style="display:none">L</td>
<td><input type="text" name="tableInputs" value="Wine"></td>
<td><input type="text" name="tableInputs" value=""></td>
<td><input type="text" name="tableInputs" value="79 poly / 21 span"></td>
<td style="display:none"></td>
<td><input type="text" name="tableInputs" value="1.27"></td>
<td><input type="number" min="0" class="item-table-values" name="numberInputs" value="235"></td>
<td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="6.28827647" onchange="add_to_total(this)"></td>
<td><input type="number" min="0" class="qty" name="numberInputs" value="127Add YldAdd Yld" onchange="add_to_total(this)"></td>
<td class="total_price"><strong>$0.00</strong></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="totalTitle" colspan="0" align="right"><strong>Total:</strong></td>
<td id="totalValue" class="total">$4,439.58</td>
</tr>
</tfoot>
</table>
<div class="row"><label for="notes">Notas:</label><textarea id="notes" name="notes" rows="4" cols="50"></textarea></div><br>
<div class="col recebido-por"><span class="recibido-por">Recibido por:</span><span class="line"></span></div>
</div>
</div>
</div>
</div>我该如何做到这一点？
2条答案
按热度按时间klsxnrf11#
把所有的东西都放在一个容器中--流体似乎是有效的，遵循 Bootstrap 网格系统的正确顺序是很重要的。
rekjcdws2#
给你
添加以下CSS：
让我知道这是否解决了你的问题。
请参见下面的片段。