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表列大小

回答

相关问题