如何在Bootstrap 3中使表尊重网格？

在Bootstrap 3中，表格（table）默认情况下不会自动适应网格系统。但是，你可以通过一些简单的步骤来确保表格尊重网格布局。

基础概念

Bootstrap的网格系统基于一系列的行（row）和列（column）组成，用于创建响应式布局。表格本身并不直接支持网格系统，但可以通过CSS样式来调整。

类型

固定宽度表格：表格宽度固定，不会随屏幕大小变化。
响应式表格：表格宽度随屏幕大小变化，适合移动设备。

应用场景

管理后台数据展示
数据报告和分析
用户信息展示

解决方案

要在Bootstrap 3中使表格尊重网格，可以使用以下方法：

方法一：使用Bootstrap的表格类

Bootstrap提供了一些表格类，可以帮助你更好地控制表格的显示。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Table</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .table-responsive {
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="table-responsive">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>jane@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，我们使用了.table-responsive类来确保表格在小屏幕设备上可以水平滚动。

方法二：自定义CSS

如果你需要更复杂的布局，可以使用自定义CSS来控制表格的宽度和布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Table</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .table-custom {
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }
    .table-custom th,
    .table-custom td {
      padding: 8px;
      line-height: 1.42857143;
      vertical-align: top;
      border-top: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <table class="table table-custom">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>John Doe</td>
              <td>john@example.com</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jane Smith</td>
              <td>jane@example.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在这个示例中，我们通过自定义CSS类.table-custom来控制表格的宽度和样式。

参考链接

通过以上方法，你可以确保在Bootstrap 3中使表格尊重网格布局，并实现响应式设计。

如何在Bootstrap 3中使表尊重网格？

、、、、

Bootstrap表不尊重网格，即使它们定义了col-xs-X类。下面是一个最小的示例，展示了(红色)表如何不与(灰色)网格对齐http://jsfiddle.net/fm65v3e0/ .col-xs-1 { 3-如果从列中删除填充，表</e

浏览 36提问于2016-08-21得票数 2

回答已采纳

3回答

如何使用Bootstrap* 3或4- 16 & 24网格系统*

、

我已经设计了一个Bootstrap 24 psd网格网站模板，但现在我对如何在Bootstrap 3或4中使用这个24或16 psd网格感到困惑，因为Bootstrap只提供12列网格系统。

浏览 6提问于2018-06-27得票数 2

3回答

我尝试了Ng-Bootstrap和Material。不幸的是，他们仍然在Alpha和Beta中。我也查了PrimeNG。目前，PrimeNG提供的组件比Material和NgBootstrap多得多。我对PrimeNG的网格系统不是很满意。例如，不清楚如何执行列偏移。我在中也找不到这个。我开始在PrimeNG组件中使用Bootstrap4。对我来说，这是否是一个好方法还不是很清楚。例如，如果我想创建一个按钮，只需使用Bootstrap类就可以完成以下操作。<button class="b

浏览 1提问于2017-05-21得票数 11

1回答

使用twitter- bootstrap -rails gem升级twitter bootstrap

、、

我在我的应用程序中使用了twitter-bootstrap-rails gem。我发现这个gem使用的是2.3版twitter bootstrap，因为我不得不使用不创建栅格时。如何升级到bootstrap 3？

浏览 1提问于2013-12-08得票数 1

2回答

使用angular ui.grid使用引导程序隐藏列

、、

我需要在angular js中使用ui-grid，并且我做了一个小测试来隐藏基于bootstrap类的列。例如，假设有一个包含100列的表，但在移动设备上，您只想显示其中的3列。这是一个柱塞 cellClass:"hidden-sm",headerCellClass:"hidden-sm" 如您所见，虽然没有显示该列，但网格仍然占据了所有空间。

浏览 1提问于2015-05-12得票数 2

3回答

流畅的twitter bootstrap布局，最小宽度列在左侧和右侧(侧边栏)

、、、、

我需要使用twitter bootstrap创建一个页面布局，如下图所示：由于我正在讨论的网站已经在运行，我不会在这里粘贴代码，但请在 (德语)现场查看它。感谢您的帮助！

浏览 0提问于2013-04-30得票数 1

回答已采纳

2回答

如何制作bootstrap* 4 masorny专栏？*

、

 我正在尝试在Bootstrap中使用masorny类型的列。但是如何在bootstrap 4中创建这种网格呢？

浏览 0提问于2020-11-29得票数 1

1回答

使用列中的group by反应数据网格

、

我正在寻找一个完整的功能(如编辑，删除，插入，列上的分组，分页和额外的) reactjs的数据网格。经过搜索，我发现了react-bootstrap-table ()，它有我想要的所有功能，除了group by on columns。是否有其他react数据网格或任何人知道如何在react-bootstrap-table中添加group by？

浏览 1提问于2016-12-06得票数 0

1回答

使用react引导表next在一个单元格中使用多行

、、、

您能告诉我如何在React中使用引导表下一步(引导表2)时多行输出(使用分隔符，如\n或<br>)。import BootstrapTable from 'react-bootstrap-table-next'; dataField: 'id', text: 'Product Price' const products =

浏览 2提问于2021-03-22得票数 1

回答已采纳

1回答

重写引导样式表失败

、

我在jsp页面中使用了引导webjars (maven依赖项)，并且我试图通过创建新的样式表来覆盖引导样式表。但是，我看不到任何变化，尽管我尊重jsp页面中样式表的顺序，并将新的样式表添加到servlet上下文中。知道怎么解决这个问题吗？location="/resources/" /> <resources mapping="/webjars/**" location="&#

浏览 1提问于2016-11-09得票数 0

回答已采纳

1回答

如何编辑数据表按钮的位置？

、、、、

我有一个问题，我的数据表的页面按钮不正确。我使用SB管理模板(bootstrap)。我试图编辑我的datatables函数，但它不起作用。我试着在这个函数中使用JSFiddle，但是它不起作用。我希望我的数据表是这样的： <script> ({{ "sWidth": "null" }, //

浏览 0提问于2015-11-18得票数 1

1回答

尝试将列转换为小型设备的行

、、

</div>js依赖项 angular-route.min.jsangular-touch.js bootstrap.min.css

浏览 2提问于2017-02-25得票数 0

回答已采纳

1回答

从bootstrap* top angular-material完全迁移的最佳方法是什么？*

、

从bootstrap完全迁移到angular-material的最佳方法是什么？我有一个现有的项目，这是自举，我改变了所有的组件css和html的角度材料(Ts还没有写)。但是，当我运行应用程序时，由于bootstrap和angular-material相互覆盖，我遇到了问题。我应该遵循什么方法才能从应用程序中完全删除引导程序？

浏览 16提问于2019-01-30得票数 1

0回答

如何在引导程序中获取列中的产品

我没有得到列中的产品，我是通过使用bootstrap在单列中获得的。我如何在bootstrap中使用网格系统，这样我就可以在列中获得产品。

浏览 2提问于2018-07-19得票数 0

1回答

无法在Bootstrap中嵌入边缘动画

、、、

我正尝试在Bootstrap 3网站中使用它。但是，当动画发布为"Responsive Scaling“时，我找不到一种方法来嵌入它，以尊重bootstrap的行和列格式。有没有人成功地在bootstrap设计中结合了边缘动画图形？

浏览 4提问于2015-08-08得票数 0

1回答

带有网格的MVC3引导表数据

、、、

我喜欢引导，我也喜欢MVC 3和MVC 4，然而，尽管我看到了大量的Bootstrap示例，但我并没有真正看到在网格(比如系统)中使用带有表格数据的Bootstrap与MVC3的示例。我不想使用Telerik、KendoUI或其他许多东西那么，对于使用Razor引擎的Bootstrap有什么确切的想法，如何避免使用表呢

浏览 3提问于2013-06-28得票数 5

回答已采纳

2回答

将子行显示为列

、、

因此，第三个表中的每个记录都包含一个具有PlayerID、CoachID和评级的字段。如果我有10名球员和3名教练，那么表3应该有30项记录。为了填充这些表，我希望显示教练的名字(从教练表中提取)，并将它们显示为DataGridView中的列，该列为每个球员都有一个行，以便当您在教练列下的球员行中输入一个值时，值get存储在表3中，并带有适当的我知道我在今年的Microsoft中做了一些类似的事情，但我不知道如何在我的Dataset

浏览 0提问于2012-09-07得票数 0

1回答

DIVs周围的填充和解决方法

、

jsFiddle： <div class="AccordionPanel" id="acc-step-3"> <input name="previous" id="acc-step-

浏览 0提问于2016-03-06得票数 2

1回答

如何让<li>在包含React Bootstrap行和列时以内联方式显示

、、、

当列表中只有html时，它将水平显示，但当我包含React Bootstrap网格布局组件(如行和列)时，它不会显示。Title again</li> </ul> </Row> </Container> 但是，当我尝试在<li>元素中使用Bootstrap g

浏览 13提问于2020-09-13得票数 0

回答已采纳

1回答

在yii 1.1中使用bootstrap* 3(Grid)的最佳方式是什么？*

、、、

我想在yiii中使用bootstrap 3(网格)。特别是使用CGridView和其他yii小工具。谢谢

浏览 0提问于2017-11-29得票数 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在Bootstrap 3中使表尊重网格？

基础概念

相关优势

类型

应用场景

解决方案

方法一：使用Bootstrap的表格类

方法二：自定义CSS

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐