我可以在引导面板中有两列吗？

Posted 2023-02-23

【中文标题】我可以在引导面板中有两列吗？

【英文标题】：Can I have two columns inside a Bootstrap Panel?

【发布时间】：2014-03-16 21:01:46

【问题描述】：

刚刚开始使用 Bootstrap。

有没有办法在面板的一侧设置两列？

谢谢

【问题讨论】：

我想使用一张桌子会更便宜。

你试过了吗？？

【参考方案1】：

你也可以有panel with a table:

<div class="panel panel-default">
     <div class="panel-heading">Title</div>
     <table class="table">
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
     </table>
</div>

【讨论】：

这绕过了 Bootstrap 的效率...各种 Bootstrap 组件采用具有“显示：表格”的样式，其功能与 html 表格几乎相同，但更灵活。

“面板 - 带表格”是 Bootstrap 的标准功能。为什么你认为它“绕过了 Bootstrap 的效率”？

也许我错了，但我认为@Gabe 试图说我们永远不应该在任何情况下使用桌子，这是错误的。当然，我们不应该使用表格进行布局，但是我的 Web 应用程序中有很多部分处理应该以表格形式显示的原始数据。这是将表格添加到面板的 Bootstrap 方式。

我赞同这个观点。布局的表格 = 非常糟糕，但如果您的布局是表格的，那么使用它们是完全可以的。

对内容进行语义测试。您的数据是否在语义上以表格形式显示（例如，您正在以上下文形式显示的数据是否以表格形式显示）？或者你只是想要一个网格（通常是一个低维网格，比如几行）来进行视觉对齐？后者，使用引导网格。

【参考方案2】：

当然.. 就像您创建任何 Bootstrap 列一样：

<div class="panel panel-default">
     <div class="panel-heading">Title</div>
     <div class="panel-body">
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
     </div>
</div>

http://www.bootply.com/114526