使用引导程序以表格形式显示表单

Question

我想以表格形式显示我的表单，如下所示：

<div class = "row">
<table class="table">
    <thead>
        <tr>
            <th> Selection </th>
            <th> Ticket type </th>
            <th> Price </th>
            <th> Quantity <th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input type="radio" value="selected"></td>
            <td> 3D </td>
            <td> 16000 </td>
            <td> 1 <td>
        </tr>

    </tbody>
</table>
</div>

我如何整合Bootstrap中的表单元素以使我这样做？表单应该如何显示的示例在附加图像中

Answer 1

查看 jsFiddle ：

<强> HTML：

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading"><b>Ticket details</b>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="col-xs-3">Selection</th>
                    <th class="col-xs-3">Ticket type</th>
                    <th class="col-xs-3">Price (UGX)</th>
                    <th class="col-xs-3">Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div class="radio">
                            <input type="radio" value="selected" />
                        </div>
                    </td>
                    <td>
                        <p class="form-control-static">3D</p>
                    </td>
                    <td>
                        <p class="form-control-static">16000</p>
                    </td>
                    <td>
                        <div class="input-group spinner">
                            <input type="text" class="form-control" value="1" />
                            <div class="input-group-btn-vertical">
                                <button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>

                                </button>
                                <button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>

                                </button>
                            </div>
                        </div>
                    </td>
                </tr>


  </tbody>
    </table>
</div>
<div class="col-xs-12 text-right">
    <p>PS: There are only <strong>40</strong> ticket still available.</p>
    <input type="button" class="btn btn-success" value="Get Movie Tickets" />
</div>

<强> CSS：

.spinner input {
    text-align: right;
}
.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 2%;
    vertical-align: middle;
    display: table-cell;
}
.input-group-btn-vertical > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    margin-left: -1px;
    position: relative;
    border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
    border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
    margin-top: -2px;
    border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i {
    position: absolute;
    top: 0;
    left: 1px;
}

<强> JavaSript：

(function ($) {
    $('.spinner .btn:first-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
    });
    $('.spinner .btn:last-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
    });
})(jQuery);

P.S。我使用了 link 中的微调器。