代码之家 › 专栏 › 技术社区 › Michiel Borkent

如何使bootstrap 4 flex表不超过页面宽度的100%?

bootstrap-4 twitter-bootstrap css html

Michiel Borkent · 技术社区 · 7 年前

在下面的示例中,我想将div格式化为一个表,但我不想将文本分布在页面宽度的100%上。我希望这些列彼此尽可能靠近,以便它能像普通文本一样阅读。对于下面的示例,我希望将其显示为:

aaa   bb   ccc ddd 
aaaaa bbbb c   dd

当我尝试使用Bootstrap 4时 .row 和 .col 我得到了我想要的表格格式,但是表格将文本扩展到页面宽度的100%。如何获得上述格式?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="font-family: Consolas;">
   <div class="d-flex p-2">
      <div>aaa&nbsp;</div>
      <div>bb&nbsp;</div>
      <div>ccc&nbsp;</div>
      <div>ddd&nbsp;</div>
   </div>
   <div class="d-flex p-2">
      <div>aaaaa&nbsp;</div>
      <div>bbbb&nbsp;</div>
      <div>c&nbsp;</div>
      <div>dd&nbsp;</div>
   </div>
</div>

编辑:我意识到使用一个普通的 table 没有CSS的引导可能会做我想要的。

1 回复 | 直到 7 年前

tao 7 年前

如果你想要一个 <table> ,这就是你应该使用的。
仅引导样式 <表> table ,以允许使用 <表> s出于任何其他目的:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tbody>
    <tr>
      <td>aaa&nbsp;</td>
      <td>bb&nbsp;</td>
      <td>ccc&nbsp;</td>
      <td>ddd&nbsp;</td>
    </tr>
    <tr>
      <td>aaaaa&nbsp;</td>
      <td>bbbb&nbsp;</td>
      <td>c&nbsp;</td>
      <td>dd&nbsp;</td>
    </tr>
  </tbody>
</table>

<表> 特定样式和摆桌子 不伸展 您可以为表指定其父级的整个宽度 width: auto :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table" style="width: auto">
  <tbody>
    <tr>
      <td>aaa&nbsp;</td>
      <td>bb&nbsp;</td>
      <td>ccc&nbsp;</td>
      <td>ddd&nbsp;</td>
    </tr>
    <tr>
      <td>aaaaa&nbsp;</td>
      <td>bbbb&nbsp;</td>
      <td>c&nbsp;</td>
      <td>dd&nbsp;</td>
    </tr>
  </tbody>
</table>

您还可以依靠Bootstrap的网格系统来限制网格的宽度 <表> 或者它的父母。

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前