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

【问题标题】：issue on class input-group in table bootstrap 3表引导程序 3 中的类输入组问题
【发布时间】：2015-09-15 12:42:41
【问题描述】：

我正在使用引导程序最新版本（引导程序 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>

我在代码中做错了什么吗？请任何人帮我考虑一下。

谢谢大家。

【问题讨论】：

    标签： html css twitter-bootstrap google-chrome


    【解决方案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>

    JSFIddle

    【讨论】：

    • 感谢您的回复。我尝试了你的建议，但它不起作用。
    • 不幸的是，你试过给.lastdatepickerwidth: 100%;吗？
    • No Alex 将列的宽度设置为 100%。检查这个Fiddle。
    • 感谢您的提琴，我认为这应该是您的首选结果：jsfiddle.net/7acmu8ug/2 编辑：忘记了 chrome 问题，哎呀
    • 谢谢亚历克斯。上面的小提琴解决了这个问题。更新您的答案，我会将其标记为正确。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-22
    • 1970-01-01
    • 2014-03-20
    • 2017-01-02
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode