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列類不工作在表

回答

相關問題