如何使响应式引导表内联？

Question

如何使跨度显示与引导响应表内联？ 当前，跨度显示在新行上。 我希望跨度在表格的右侧，垂直于表格标题居中。

<div class="panel panel-default">
    <div class="panel-heading"><h3 class="panel-title">Sibling(s)</h3></div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>Gender</th>
                    <th>Name</th>
                    <th>Birthdate</th>
                    <th>School</th>
                    <th>Grade</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <select class="form-control" name="sibling-gender1" id="sibling-gender1">
                            <option></option>
                            <option>M</option>
                            <option>F</option>
                        </select>
                    </td>
                    <td>
                        <input class="form-control" name="sibiling-name1" id="sibiling-name1" style="width: 100%;"/>
                    </td>
                    <td>
                        <input class="form-control" name="sibling-birthdate1" id="sibling-birthdate1" placeholder="MM-DD-YYYY"
                               style="width: 100%;"/>
                    </td>
                    <td>
                        <input class="form-control" name="sibling-school1" id="sibling-school1" style="width: 100%;"/>
                    </td>
                    <td>
                        <select class="form-control" name="sibling-grade1" id="sibling-grade1">
                            <option></option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <span class="glyphicon glyphicon-plus"></span>
        <!-- end .form-group -->
    </div>
    <!-- end .panel-body -->
</div>
<!-- end .panel -->

Answer 1

您可以将.table-responsive / span元素的显示属性更改为table-cell 。 只需将.table-responsive的宽度设置为100% ，即可填充剩余空间。 此外，您可能还需要向span元素添加填充。

这里的例子

.table-responsive {
    display:table-cell;
    width:100%;
}
.table-responsive + .glyphicon.glyphicon-plus {
    display:table-cell;
    padding-left:10px;
}

如果要使span元素在中间对齐，您所要做的就是在元素vertical-align:middle添加vertical-align:middle 。

这里的例子

.table-responsive + .glyphicon.glyphicon-plus {
    display:table-cell;
    padding-left:10px;
    vertical-align:middle;
}

值得注意的是，此CSS假定该元素是相邻的同级元素。 如果不是，则需要更改选择器。

Answer 2

Bootstrap方式可能是将.panel-body为.row并将其子级（ .table-responsive, .glyphicon ）变成列：

<div class="panel-body row">
    <div class="col-xs-11 table-responsive "></div>
    <span class="col-xs-1 glyphicon glyphicon-plus"></span>
</div>

表格标题的垂直中心无法通过CSS确定（因为它只是左列高度的一部分），但是您可以调整表格标题单元格和图标的顶部填充。