Bootstrap模态字段没有扩展

Question

我有一个Bootstrap Modal，它使用jQuery在我的表单中为我创建一个列表。我只是想随着电子邮件输入长度的扩展而扩展电子邮件部分。

更新：这是我使用的模式：https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=table-with-add-and-delete-row-feature

这是我第一次输入该字段时的列表：

我希望能够将列宽推到电子邮件输入的长度上。

代码如下：

.table-wrapper {
		width: 700px;
		margin: 30px auto;
        background: #fff;
        padding: 20px;	
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
    .table-title {
        padding-bottom: 10px;
        margin: 0 0 10px;
    }
    .table-title h2 {
        margin: 6px 0 0;
        font-size: 22px;
    }
    .table-title .add-new {
        float: right;
		height: 30px;
		font-weight: bold;
		font-size: 12px;
		text-shadow: none;
		min-width: 100px;
		border-radius: 50px;
		line-height: 13px;
    }
	.table-title .add-new i {
		margin-right: 4px;
	}
    table.table {
        table-layout: fixed;
    }
    table.table tr th, table.table tr td {
        border-color: #e9e9e9;
    }
    table.table th i {
        font-size: 13px;
        margin: 0 5px;
        cursor: pointer;
    }
    table.table th:last-child {
        width: 100px;
    }
    table.table td a {
		cursor: pointer;
        display: inline-block;
        margin: 0 5px;
		min-width: 24px;
    }    
	table.table td a.add {
        color: #27C46B;
    }
    table.table td a.edit {
        color: #FFC107;
    }
    table.table td a.delete {
        color: #E34724;
    }
    table.table td i {
        font-size: 19px;
    }
	table.table td a.add i {
        font-size: 24px;
    	margin-right: -1px;
        position: relative;
        top: 3px;
    }    
    table.table .form-control {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
        border-radius: 2px;
    }
	table.table .form-control.error {
		border-color: #f50000;
	}
	table.table td .add {
		display: none;
	}

<!-- Modal (THIS IS WHAT CONTROLS THE MODAL) -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">Users &amp; Email Addresses</h5>
	      </div>
	      <div class="modal-body">
		            <table class="table table-bordered">
		                <thead>
		                    <tr>
		                        <th>Email</th>
		                        <th>User Role</th>
		                        <th>Actions</th>
		                    </tr>
		                </thead>
		                <tbody id="modalTBody">
		                
		                </tbody>
		            </table>
		        </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
	      </div>
	    </div>
	  </div>
</div>

Answer 1

知道了！

Modal的CDN CSS定义了此属性：

table.table {
    table-layout: fixed;
}

我将其更改为：

table.table {
    table-layout: auto;
}

完美运行。