bootstrap 4表列大小

在bootstrap 3我可以將col-sm-xx應用於thead中的th標記並隨意調整表列的大小。然而，這在bootstrap中不起作用。4.我如何在bootstrap 4中實現這樣的功能？bootstrap 4表列大小

<thead> 
<th class="col-sm-3">3 columns wide</th> 
<th class="col-sm-5">5 columns wide</th> 
<th class="col-sm-4">4 columns wide</th> 
</thead>

望着codeply只要正確不小，特別是如果你添加一些數據表。看到這是如何運行的：

<div class="container" style="border: 1px solid black;"> 
    <table class="table table-bordered"> 
    <thead> 
     <tr class="row"> 
      <th class="col-sm-3">3 columns wide</th> 
      <th class="col-sm-5">5 columns wide</th> 
      <th class="col-sm-4">4 columns wide</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>123</td> 
      <td>456</td> 
      <td>789</td> 
     </tr> 
    </tbody> 
</table> 
</div>

來源

2016-06-20 Killerpixler

作爲附錄這樣的問題：如果有長的內容（如非常長的URL）來顯示自舉4表即使在下面的尺寸回答中也不是一個好的解決方案。無論是使用flex-row還是row/col解決方案，溢出和文本包裝都會更好地工作 – Killerpixler

更新2018

確保您的表包括table類。這是因爲Bootstrap 4 tables are "opt-in"所以table類必須有意添加到表中。

http://codeply.com/go/zJLXypKZxL

引導3.x中也有一些CSS重置表細胞，使它們不會浮動..

table td[class*=col-], table th[class*=col-] { 
    position: static; 
    display: table-cell; 
    float: none; 
}

我不知道爲什麼，這是不是就是引導4 alpha，但可能會在最終版本中添加。添加此CSS將幫助所有列使用在thead設置寬度..

Bootstrap 4 Alpha 2 Demo

UPDATE（如引導4.0.0）

現在引導4 Flexbox的，在添加col-*時，表格單元格將不會採用正確的寬度。解決方法是在表格單元格上使用d-inline-block類，以防止默認顯示：列的摺疊。

在BS4另一種選擇是使用尺寸utils的類寬度...

<thead> 
    <tr> 
      <th class="w-25">25</th> 
      <th class="w-50">50</th> 
      <th class="w-25">25</th> 
    </tr> 
</thead>

Bootstrap 4 Alpha 6 Demo

最後，您可以使用上表中的行d-flex（TR），和col-*電網列（th，td）上的類...

<table class="table table-bordered"> 
     <thead> 
      <tr class="d-flex"> 
       <th class="col-3">25%</th> 
       <th class="col-3">25%</th> 
       <th class="col-6">50%</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="d-flex"> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-6">..</td> 
      </tr> 
     </tbody> 
    </table>

Bootstrap 4.0.0 (stable) Demo

來源

2016-06-20 17:37:24 ZimSystem

實際上，它的大小不合適。如果您添加一些邊框來查看尺寸大小以及向主體添加行，請將其檢出。我把代碼放在問題 – Killerpixler

非常好，謝謝oyou – Killerpixler

事實上，如果你的列中的內容溢出，因爲其他列沒有擴展，你的BS4-A6的例子不起作用。嘗試在一列中粘貼一些Lorem ipsum。 – Killerpixler

表列大小班已經從這個

<th class="col-sm-3">3 columns wide</th>

到

<th class="col-3">3 columns wide</th>

來源

2017-02-19 10:39:14

確實它有alpha 5.謝謝你的更新！ – Killerpixler

這似乎不適用於設置列寬：http://www.codeply.com/go/Utyon2XEB6 – ZimSystem

請參閱http://stackoverflow.com/questions/41794746/col-xs-not-working- in-bootstrap-4 –

另一種選擇是在錶行申請彎曲的造型改變，將col-classes添加到表頭/表數據元素：

<table> 
    <thead> 
    <tr class="d-flex"> 
     <th class="col-3">3 columns wide header</th> 
     <th class="col-sm-5">5 columns wide header</th> 
     <th class="col-sm-4">4 columns wide header</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="d-flex"> 
     <td class="col-3">3 columns wide content</th> 
     <td class="col-sm-5">5 columns wide content</th> 
     <td class="col-sm-4">4 columns wide content</th> 
    </tr> 
    </tbody> 
</table>

來源

2017-09-19 13:29:54

作爲阿爾法6的可以創建以下SASS文件：

@each $breakpoint in map-keys($grid-breakpoints) { 
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 

    col, td, th { 
    @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      flex: none; 
      position: initial; 
     } 
    } 

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 
     @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      width: 100%/$grid-columns * $i; 
     } 
     } 
    } 
    } 
}

來源

2018-01-09 11:22:48

bootstrap 4表列大小

回答

相關問題