html - 如何将网格与引导程序一起用于表单（v3）？

问题描述

我只是从 Bootstrap 中使用的网格开始，我希望我的表单使用网格看起来像这样，这适用于我的移动版本。

目前我的桌面版本是这样的：

以下是我构建表单的 HTML 代码，它是在 PHP 的帮助下在函数中制作的：

public function userDate(){
        echo '<div>';
        echo '<table class="table">';
        echo '<tbody>';
        echo '<tr>                 
            <td class="columna-titulo">Employee</td><td class="columna-valor">''</td>
            <td class="columna-titulo">Name</td><td class="columna-valor" colspan="2">''</td>
            <td></td>
            </tr>';
        echo '<tr>
            <td class="columna-titulo">Date</td><td class="columna-valor" id="TdFechaIngreso">''</td>
            <td class="columna-tituloYears Old</td><td class="columna-valor">''</td>
            <td class="columna-titulo"Department</td><td class="columna-valor">''</td>
            </tr>';                                        
        echo '</tbody>';
        echo '</table>';
        echo '</div>';        
    }

我通过以下文档支持自己，但我找到了解决方案Documentation Bootstrap

更新：

执行第一个答案，添加.col-sm-12仍然没有任何变化反映在我的表格中

public function userDate(){
        echo '<div>';
        echo '<table class="table">';
        echo '<tbody>';
        echo '<tr>                  
            <td class="columna-titulo .col-sm-12">Employee</td><td class="columna-valor .col-sm-12">''</td>
            <td class="columna-titulo .col-sm-12">Name</td><td class="columna-valor .col-sm-12" colspan="2">''</td>
            <td></td>
            </tr>';
        echo '<tr>
            <td class="columna-titulo .col-sm-12">Date</td><td class="columna-valor .col-sm-12" id="TdFechaIngreso">''</td>
            <td class="columna-titulo .col-sm-12">Years Old</td><td class="columna-valor .col-sm-12">''</td>
            <td class="columna-titulo .col-sm-12">Department</td><td class="columna-valor .col-sm-12">''</td>
            </tr>';                                        
        echo '</tbody>';
        echo '</table>';
        echo '</div>';
        
    }

你知道我的代码有问题吗？

标签： htmlcsstwitter-bootstrap

html - 如何将网格与引导程序一起用于表单（v3）？

问题描述

解决方案

推荐阅读