我在我的html thymeleaf模板中使用了bootstrap，如下所示：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span>
rel="styleheet"
integrity="sha384-KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"/span>>
<table class="table table-striped table-sm" >
<thead>
<th>洗掉</th>
<th>編輯</th>/span>
<th>Consult Date</th>
<th>預訂號碼</th>
<th>dispense details</th>
表格被拉伸到了我的螢屏寬度。我怎樣才能使表格使用50-60%的螢屏寬度呢？
uj5u.com熱心網友回復：
利用BS網格，將表格放在一列內。網格中有12列，所以對于50-60%的螢屏寬度，使用.col-6（6/12=50%），.col-7（7/12=58.333%）或其回應式的變體。
在下面的例子中，我使用了.col-sm-7，所以它將在超小螢屏上占據所有的12列，然后在小螢屏和大螢屏上只占7列。
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- KyZXEAg3QhqLMpG8r 8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"/span>>
<div class="container-fluid"/span>>
<div class=" row">
<div class="col-sm-7">
<table class="table table-striped table-sm">
<thead>
<tr>/span>
<th>洗掉</th>/span>
<th>編輯</th>/span>
<th>Consult Date</th>
<th>預訂號碼</th>
<th>dispense details</th>
</tr>/span>
</thead>/span>
<tbody>/span>
<tr>/span>
<td>/span>yup</td>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
</tr>/span>
<tr>/span>
<td>/span>yup</td>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
</tr>/span>
<tr>/span>
<td>/span>yup</td>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
<td>/span>yup</td>/span>
</tr>/span>
</tbody>/span>
</table>/span>
</div>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/324181.html
標籤：
下一篇：如何從API中獲取Id