我的表单有以下代码。我试图让它响应，但这是不可能的。当我添加此代码时，我必须水平滚动，我不想要。我希望整个桌子适合我的桌面而不需要滚动！有什么帮助吗？
<form id="calculateform_id" name="calculateform_name" method="post" onsubmit="return false;">
<div>
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr class="info">
<th></th>
<th><h4>Member A</h4></th>
<th><h4>Member B</h4></th>
<th><h4>Member C</h4></th>
<th><h4>Member D</h4></th>
</tr>
</thead>
<tbody>
<tr class="active">
<th>Name</th>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member1_name">
</div>
</td>
<td><div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member2_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member3_name">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="name" name="member4_name">
</div>
</td>
</tr>
<tr class="active">
<th>Opportunity Cost / Salary</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member1_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member1_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member2_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member2_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member3_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member3_ocs" value="100,000" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="member4_ocs_id" class="form-control" onkeypress="return inputNumber(event);" name="member4_ocs" value="100,000" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Hours Worked</th>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member1_hw_id" name="member1_hw" onkeypress="return inputNumber(event);" value="30" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member2_hw_id" name="member2_hw" onkeypress="return inputNumber(event);" value="40" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member3_hw_id" name="member3_hw" onkeypress="return inputNumber(event);" value="50" required="required">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="member4_hw_id" name="member4_hw" onkeypress="return inputNumber(event);" value="60" required="required">
</div>
</td>
</tr>
<tr class="active">
<th>Invested Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_ic_id" name="member1_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_ic_id" name="member2_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_ic_id" name="member3_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_ic_id" name="member4_ic" value="0" onkeypress="return inputNumber(event);" >
</div>
</td>
</tr>
<tr class="active">
<th>Contributed Cash</th>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member1_cc_id" name="member1_cc" value="500" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member2_cc_id" name="member2_cc" value="600" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member3_cc_id" name="member3_cc" value="750" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="member4_cc_id" name="member4_cc" value="1,000" required="required" onkeypress="return inputNumber(event);">
</div>
</td>
</tr>
<tr class="active">
<th>Date Joined The Project</th>
<td>
<div class="input-group date" id='member1_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member1_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member2_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member2_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member3_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member3_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
<td>
<div class="input-group date" id='member4_datetimepicker'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" min="0" name="member4_djtp" placeholder="yyyy/mm/dd">
</div>
</td>
</tr>
<tr class="success">
<th>Your Share ($)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysc" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysc" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysc" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysc" disabled/></td>
</tr>
<tr class="success">
<th>Your Share (%)</th>
<td><input type="text" class="blue-color form-control" name="member1_ysp" disabled/></td>
<td><input type="text" class="red-color form-control" name="member2_ysp" disabled/></td>
<td><input type="text" class="orange-color form-control" name="member3_ysp" disabled/></td>
<td><input type="text" class="green-color form-control" name="member4_ysp" disabled/></td>
</tr>
<tr class="success">
<th>Total Share (#)</th>
<td colspan="4"><b><input type="text" id="totalshare_id" class="form-control centered" name="totalshare" disabled/></b></td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分：0)
你的HTML结构不足以引导（没有.container / container-fluid element（s），没有.row元素，没有col- *元素）。此外，你想要一个5列的表格式响应，我不认为这对移动设备是一个好主意。
我建议您查看移动视图和平板电脑设备（如您已有桌面视图），然后继续使用bootstrap为每个视图设置样式。