Bootstrap table 使用表单输入时列的宽度不同
Bootstrap table column not same width when using a form input
我正在尝试创建一个 bootstrap table，其中一个单元格具有表单输入。但是，我意识到此输入阻止 bootstrap 将每列的 table 宽度设置为相同，即使我减少了输入的长度也是如此。
任何人都可以帮助调整所有列的宽度一致吗？谢谢
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
向 <table> 和 <input> 标签添加了 class。通过使文本对齐中心将使您的 table 更加微妙和一致。您还应该尝试将 classes 用于其他屏幕尺寸，例如 col-md-6 或 col-lg-4 最适合您的尺寸。但这种做法将帮助您在不同的屏幕尺寸上控制您的 UI。希望有所帮助。如果这不适合您，请告诉我。
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.txt_cent{
text-align:center;
}
.inp_width{
width:70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped txt_cent" >
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
我正在尝试创建一个 bootstrap table，其中一个单元格具有表单输入。但是，我意识到此输入阻止 bootstrap 将每列的 table 宽度设置为相同，即使我减少了输入的长度也是如此。
任何人都可以帮助调整所有列的宽度一致吗？谢谢
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
向 <table> 和 <input> 标签添加了 class。通过使文本对齐中心将使您的 table 更加微妙和一致。您还应该尝试将 classes 用于其他屏幕尺寸，例如 col-md-6 或 col-lg-4 最适合您的尺寸。但这种做法将帮助您在不同的屏幕尺寸上控制您的 UI。希望有所帮助。如果这不适合您，请告诉我。
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.txt_cent{
text-align:center;
}
.inp_width{
width:70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped txt_cent" >
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>