Question

我使用bootstrap 3表设计myform，如下所示：

<table class="table table-bordered form">
    <tr>
        <td>
            <label class="control-label">Title <span><i data-toggle="tooltip" data-placement="top" title="Required" class="icon-asterisk"></i></span>

            </label>
        </td>
        <td colspan="3" class="">
            <input type="text" name="title" class="form-control" value="" id="title" tabindex="1" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="control-label">Author <span><i data-toggle="tooltip" data-placement="top" title="Required" class="icon-asterisk"></i></span>

            </label>
        </td>
        <td class="">
            <input type="text" name="sotitle" class="form-control" value="" id="title" tabindex="1" />
        </td>
        <td>
            <label class="control-label">Publisher <span><i data-toggle="tooltip" data-placement="top" title="REquired" class="icon-asterisk"></i></span>

            </label>
        </td>
        <td class="">
            <input type="text" name="sotitle" class="form-control" value="" id="title" tabindex="1" />
        </td>
    </tr>
    <tr>
        <td>
            <label class="control-label">type <span><i data-toggle="tooltip" data-placement="top" title="Required" class="icon-asterisk"></i></span>

            </label>
        </td>
        <td class="">
            <input type="text" name="sotitle" class="form-control" value="" id="title" tabindex="1" />
        </td>
        <td>
            <label class="control-label">number <span><i data-toggle="tooltip" data-placement="top" title="REquired" class="icon-asterisk"></i></span>

            </label>
        </td>
        <td class="">
            <input type="text" name="sotitle" class="form-control" value="" id="title" tabindex="1" />
        </td>
    </tr>
</table>

我设计标题为完整版，并为colspan="3"添加td。对于其他我需要two td，我的表格是正确的但是在响应中这个表不是很好的工作。我需要更改才能在响应中显示列表td，如下所示：

如何在响应式设计中生成这个？！

DEMO HERE

Answer 1

如果我理解正确，您需要完全删除该表，并使用bootstraps网格结构like this demo编写它。

这将允许输入在页面低于一定宽度后堆叠（使用演示屏幕右侧的屏幕/电话切换按钮进行测试）。

以下是相关代码：

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">Title</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Author</label>
        <div class="col-sm-4">
            <input type="text" class="form-control"/>
        </div>
        <label class="col-sm-2 control-label">Publisher</label>
        <div class="col-sm-4">
            <input type="text" class="form-control"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Type</label>
        <div class="col-sm-4">
            <input type="text" class="form-control"/>
        </div>
        <label class="col-sm-2 control-label">Number</label>
        <div class="col-sm-4">
            <input type="text" class="form-control"/>
        </div>
    </div>
</form>

list bootstrap响应式设计中的两个td表

1 个答案: