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

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

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

兄弟姐妹
性别
名称
生日
学校
等级
M
F
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

您可以将

.table responsive

/

span

元素的显示属性更改为

表格单元格

。只需将

.table responsive

的宽度设置为

100%

，即可填满剩余的空间。此外，您可能还需要向span元素添加填充

如果您希望跨距元素在中间对齐，您将要做的就是添加<代码>垂直对齐：中/代码>元素。

---

值得注意的是，这个CSS假设元素是相邻的兄弟元素。如果没有，则需要更改选择器。

引导方法可以是将

.panel body

A

.row

及其子项（

.table responsible，.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确定（因为它只是左栏高度的一部分），但您可以调整表格标题单元格和图标的顶部填充。

在表格右侧，与表格标题垂直居中。谢谢！这很好，但是有没有办法将其与表格标题对齐，使跨度显示在表格标题的垂直中心？垂直对齐示例将其与整个表格对齐。@NathanJones Like？或者像。。或者你说的是“兄弟姐妹…”文本？就像第一个文本一样，但是根据页眉位置，跨度看起来应该更高一些，位于垂直中心。我希望这是有意义的。@NathanJones不会

垂直对齐：top

工作吗。。您始终可以添加一个

填充顶部

值。。。

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

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