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

我希望以表格形式显示我的表格，如下所示：

<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>

挑选
票型
价格
量
三维
16000
1.

我将如何从引导中整合表单元素以使我能够做到这一点？表单的外观示例见所附图像

请查看：

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>

.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;
}

(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);

JavaSript:

<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>

.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;
}

(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);

---

另外，我使用了这个

中的微调器，我不知道你到底想要什么…你能解释一下吗。虽然如果你想在桌子上使用引导，那么你可以给你想要的span3，Span4任何东西。@ManindraSingh我附上了一张图片来描述我到底想要的表单的样子。目前，该结构仅使用表。我想用表格的形式