twitter bootstrap列类不工作在表

[email protected]我试图在我的内容区域内适合引导表。我发现Eric Saupe的教程here在th中使用bootstraps默认列类来修复td的宽度，但在我的Firefox中，它似乎不起作用。我table低于：twitter bootstrap列类不工作在表

<div class="row"> 
      <div class="col-md-10 p-l-xlg"> 


       <table class="records_list table table-condensed table-striped table-bordered"> 
        <thead> 
        <tr> 

         <th class="col-md-1">Name</th> 
         <th class="col-md-1">Organization</th> 
         <th class="col-md-1">Designation</th> 
         <th class="col-md-1">Address</th> 
         <th class="col-md-1">Office Phone</th> 
         <th class="col-md-1">Resident Phone</th> 
         <th class="col-md-1">Mobile</th> 
         <th class="col-md-1">Email</th> 
         <th class="col-md-1">Relation</th> 
         <th class="col-md-1">Actions</th> 
        </tr> 
        </thead> 
        <tbody> 
        {% for ref in reference %} 
         <tr> 
          <td>{{ ref.name }}</td> 
          <td>{{ ref.organization }}</td> 
          <td>{{ ref.designation }}</td> 
          <td>{{ ref.address }}</td> 
          <td>{{ ref.phoneOff }}</td> 
          <td>{{ ref.phoneRes }}</td> 
          <td>{{ ref.mobile }}</td> 
          <td>[email protected]</td> 
          <td>{{ ref.getRelationReadable }}</td> 

          <td> 
           <a href="{{ path('applicant_profile_reference_edit', { 'id': ref.id }) }}" class="btn btn-login editlightbox"> 
            <i class="glyphicon glyphicon-pencil"></i> Edit</a> 

          </td> 

         </tr> 
        {% endfor %} 
        </tbody> 


       </table> 
     </div>

我没有这个表比引导默认有其他附加的CSS。我实际上需要调整电子邮件td的大小，因为这是最大的，但是把这个类放到那个地方也是行不通的。我究竟做错了什么？任何帮助深表感谢。

来源

2014-09-01 Samia Ruponti

所有col-md- *值加起来为13. Bootstrap使用12列布局，所以不知道这将如何布局。 – DavidG 2014-09-01 16:21:41

我已经打了一个bootply，它以什么方式不适合你？ http://www.bootply.com/Jb9Q4dljvL – DavidG 2014-09-01 16:23:51

哎呀....输入错误...我打了四个而不是1！编辑！：p – 2014-09-01 16:24:58

如果您只是试图缩小电子邮件字段，请将该电子邮件地址的col-md-4更改为较少的号码，并将其分配到其他地方。我在上面的bootply上测试过，在Firefox或Webkit上没有问题。

来源

2014-09-01 16:39:07 tommymcdonald

可以请你发布你的bootply吗？我更新了代码，4是输入错误。他们都应该是1列。它仍然不适合我。我用实际的电子邮件替换了“{{ref.email}}”字段，因此它仍然很宽。 – 2014-09-01 16:42:40

@SamiaRuponti这是DavidG的上述bootply的一个分支，其col- *值已更改为1.这似乎是您要求的内容http://www.bootply.com/IBIONXwKBn – tommymcdonald 2014-09-02 14:35:46

为什么col-md-1 '不适合'th'？ – vipin8169 2016-03-21 05:43:16

所以我结束了使用我不喜欢的东西，但它起作用（至少在这种情况下）。我有在中屏幕空间的问题，所以我加了一个辅助类，并将此向我的样式表：

@media (min-width: 992px) { 

td.tolong { 
    max-width:5em;word-wrap: break-word} 
}

的break-word特性使表看起来难看，所以这不是最好的解决办法。但它适用于我的情况。

来源

2014-09-01 17:07:05

twitter bootstrap列类不工作在表

回答

相关问题