bootstrap-4 - 为什么 td size 在我的引导表中变得如此之宽?
问题描述
我有一个包含一些元素的引导表:
<table class="table">
<thead>
<tr>
<h5>Orders from Restaurant</h5>
</tr>
</thead>
<tbody>
<tr>
<td class="pr-0">
<img src="../../../storage/images/food/sharshara/appetizer_wing_preview.jpg"
height="100px" class="img-thumbnail">
</td>
<td>
<h4 class="">Chicken wings</h4>
<p>No sauce, extra dust</p>
<div class="float-right">
<div class="input-group input-group-sm" style="width: 100px">
<div class="input-group-prepend">
<button class="btn btn-danger" type="button" id="button-addon1">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
<input type="text" class="form-control text-center" value="1"
aria-describedby="button-addon1">
<div class="input-group-append">
<button class="btn btn-success" type="button" id="button-addon1">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
解决方案
您需要“修复”一些事情..
- 使用 width:1% 缩小列宽以适合图像
- 不要使用
img-thumbnail
,因为那会缩小图像
HTML
<tbody>
<tr>
<td class="pr-0" style="width:1%">
<img src="..." />
</td>
<td>
..
</td>
</tr>
</tbody>
推荐阅读
- python - 如何将表情符号的 unicode 转换为 CLDR 短名称
- azure - 使用逻辑应用程序部署 Arm 模板引发错误:数据接收器不能在同一资源的同一类别的不同设置中重复使用
- scala - 如何使用 Circe 为某种类型的列表半自动派生解码器?
- javascript - 为什么我的点击事件不起作用?(ASP.NET MVC)
- android - 如何在 Android 中以编程方式启用 VoWiFi(WiFi 通话)?
- typescript - 如何根据 TypeScript 中其他属性的值声明属性类型
- javascript - 在 VueJS 中过滤 v-for 列表后,如果 Child 为空,则隐藏字符串
- javascript - Jest 测试用例失败 - ReferenceError: Office is not defined
- gwt - GWT JsInterop - 在 JavaScript 中扩展 Java 接口
- c# - 如何从与 C# 中的 UI 线程不同的线程访问 HttpContext.Request.Cookie?