切换到移动屏幕时，表在引导程序中没有响应

Question

我在bootstrap中创建了一个表，其中我有一个输入字段，一个文本区域和一个按钮，界面适用于大屏幕和平板电脑，但它不能在移动屏幕上工作，我不知道为什么它不工作。 这是我的代码。

<section class="container">
<div class="">
<table class="table table-responsive" style="display:block;" >
    <tr class="active">
      <td>Tittle:</td>
      <td><input type="text" name="tittle" style="width:300px;"/></td>
    </tr>
   <tr class="success">
     <td>Post:</td>
     <td><textarea name="post" style="width:300px; height:150px;"></textarea></td>
   </tr>
   <tr>
   <td></td>
   <td><input type="submit" name="Post" class="btn btn-success"/></td>
   </tr>
</table>
</div>
</section>

页面的表格视图。 移动视图的页面。

Answer 1

试试这个

请参阅演示：http://jsfiddle.net/Debananda/jJhsL/

<section class="container">
<div class="table-responsive">
<table class="table">
    <tr class="active">
      <td>Tittle:</td>
      <td><input type="text" name="tittle" class="form-control"/></td>
    </tr>
   <tr class="success">
     <td>Post:</td>
     <td><textarea name="post" class="form-control" style="height:150px;"></textarea></td>
   </tr>
   <tr>
   <td></td>
   <td><input type="submit" name="Post" class="btn btn-success"/></td>
   </tr>
</table>
</div>
</section>

Mobile Img：

Answer 2

最后我做到了这个唯一的问题是div class =＆＃34; row＆＃34;和div class =＆＃34; col-lg-3＆＃34;

<section class="container">
<div class="row">
<div class="col-lg-3">
<div class="table-responsive">
<table class="table">
    <tr class="active">
      <td>Tittle:</td>
      <td><input type="text" name="tittle" class="form-control"/></td>
    </tr>
   <tr class="success">
     <td>Post:</td>
     <td><textarea name="post" class="form-control" style="height:150px;"></textarea></td>
   </tr>
   <tr>
   <td></td>
   <td><input type="submit" name="Post" class="btn btn-success"/></td>
   </tr>
</table>
</div>
</div>
</div>
</section>