【问题标题】:Can I have two columns inside a Bootstrap Panel?我可以在引导面板中有两列吗?
【发布时间】:2014-03-16 21:01:46
【问题描述】:

刚刚开始使用 Bootstrap。

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

谢谢

【问题讨论】:

  • 我想使用一张桌子会更便宜。
  • 你试过了吗??

标签: twitter-bootstrap-3 panel


【解决方案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

【讨论】:

    猜你喜欢
    • 2020-06-22
    • 2015-03-22
    • 2014-06-29
    • 1970-01-01
    • 2019-09-04
    • 1970-01-01
    • 2014-04-26
    • 1970-01-01
    • 2018-06-08
    相关资源
    最近更新 更多