表引导程序 3 中类输入组的问题

Question

我正在使用引导程序最新版本（引导程序 v3.3.5）。 我正在尝试添加一个input-group以在如下表中使用日期选择器。

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <thead> <tr> <th>Fees Name</th> <th>Amount</th> <th>Last Date</th> </tr> </thead> <tbody class="clubbedfeebody"> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text" /> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" maxlength="100" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text" /> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" maxlength="100" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text" /> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" maxlength="100" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text" /> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" maxlength="100" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> </tbody> </table>

当我在表格内使用一个空文本框时，它的工作正常，如下所示。

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <thead> <tr> <th>Fees Name</th> <th>Amount</th> <th>Last Date</th> </tr> </thead> <tbody class="clubbedfeebody"> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text" /> </td> <td> <input placeholder="Last Date" class="form-control" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" /> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text" /> </td> <td> <input placeholder="Last Date" class="form-control" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" /> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text" /> </td> <td> <input placeholder="Last Date" class="form-control" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" /> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text" /> </td> <td> <input placeholder="Last Date" class="form-control" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" /> </td> </tr> </tbody> </table>

但是当我将它与input-group类一起使用时，它仅在 chrome 中占据了表格的 75%。 在 Firefox 中它工作正常。 我还尝试更改宽度并尝试添加浮动。 它仅减少input-group的宽度。 我添加了我工作的代码。 但没有任何效果。

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <table class="table table-bordered"> <thead> <tr> <th>Fees Name</th> <th>Amount</th> <th>Last Date</th> </tr> </thead> <tbody class="clubbedfeebody"> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][0][clubbedFeesName]" id="Fees_0_0_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][0][amount]" id="Fees_0_0_amount" type="text"> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" type="text" maxlength="100"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][1][clubbedFeesName]" id="Fees_0_1_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][1][amount]" id="Fees_0_1_amount" type="text"> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][1][lastDate]" id="Fees_0_1_lastDate" type="text" maxlength="100"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][2][clubbedFeesName]" id="Fees_0_2_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][2][amount]" id="Fees_0_2_amount" type="text"> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][2][lastDate]" id="Fees_0_2_lastDate" type="text" maxlength="100"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][3][clubbedFeesName]" id="Fees_0_3_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][3][amount]" id="Fees_0_3_amount" type="text"> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][3][lastDate]" id="Fees_0_3_lastDate" type="text" maxlength="100"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> <tr data-feescount="0"> <td> <select class="form-control classdropdown" data-classselect="0" name="Fees[0][4][clubbedFeesName]" id="Fees_0_4_clubbedFeesName"> <option value="">...Select Fees Category...</option> <option value="1">Registration Fee</option> <option value="2">Admission Fee</option> <option value="3">Security Deposit</option> <option value="4">Tution Fee</option> <option value="5">Exam Fee</option> <option value="6">Book Fee</option> <option value="7">Bus Fee</option> </select> </td> <td> <input placeholder="Amount" class="form-control" name="Fees[0][4][amount]" id="Fees_0_4_amount" type="text"> </td> <td class="row"> <div class="col-md-6"> <div class="input-group date lastdatepicker"> <input placeholder="Last Date" class="form-control" style="width:auto;float:right" name="Fees[0][4][lastDate]" id="Fees_0_4_lastDate" type="text" maxlength="100"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </td> </tr> </tbody> </table>

我在代码中做错了什么吗？ 请任何人帮我解决这个问题。

谢谢大家。

Answer 1

这应该没问题，宽度为：33%；

<tr>
    <th style="width: 33%;">Fees Name</th>
    <th style="width: 33%;">Amount</th>
    <th style="width: 33%;">Last Date</th>
</tr>

...

<td>
    <div class="input-group date lastdatepicker">             
        <input class="form-control date lastdatepicker" placeholder="Last Date" name="Fees[0][0][lastDate]" id="Fees_0_0_lastDate" maxlength="100" type="text"/>                
         <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
          </span>
    </div>
</td>

JSFIdle