Question

我试图用一个具有表单输入的单元格创建一个引导表。但是，我意识到，即使我减少了输入的长度，该输入也阻止了引导程序将每一列的表宽度设置为相同。

有人可以帮助调整所有列的宽度以保持一致吗？谢谢。

select 
   s.sid,e.name as sName,
   s.cid,e1.name as cName,
   s.high-th,s.Low-th,s.Status,
   v.counts,v.Get 
from status s inner join value v on s.sid=v.sid and s.cid=v.cid
inner join equipment e on s.sid=e.eid
inner join equipment e1 on s.cid=e1.eid

Answer 1

为<table>和<input>标签添加了一个类。通过使文本居中对齐将使您的表格更加微妙和一致。您还应该尝试使用最适合您的其他屏幕尺寸的类，例如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>

使用表单输入时，引导表列的宽度不相同

1 个答案: