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元素添加填充。

EXAMPLE HERE

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

如果您希望span元素在中间对齐，您只需要将vertical-align:middle添加到元素中。

EXAMPLE HERE

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

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

Answer 2

引导方式可能是使.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确定（因为它只是左列高度的一部分），但您可以调整表头单元格和图标的顶部填充。

如何内联响应式引导表？

2 个答案: