删除 Bootstrap 表的顶部边框和边缘答案

【问题标题】：Removing the top borders and edges of the Bootstrap table删除 Bootstrap 表的顶部边框和边缘
【发布时间】：2017-08-03 22:42:11
【问题描述】：

反应代码：

<div style={{paddingLeft: '8px', paddingRight: '8px'}}>
                            <div className="-subtitle">
                                <div className="pull-right" style={{marginBottom:'5px'}}>
                                    <Button bsStyle="primary" bsSize="xsmall" onClick={this.actionAdd}>Create New Parameter</Button>
                                </div>
                                <BootstrapTable
                                    data={item.params}
                                    className="removeTop"
                                    striped
                                    hover>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        width="100px"

                                    >Name</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataSort
                                        width="200px"
                                    >GUI Name</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataSort
                                        width="100px"
                                    >Default</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataSort
                                        width="300px"
                                    >Options</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataField="required"
                                        dataSort
                                        width="100px"
                                    >Required</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataField="multiline"
                                        isKey
                                        dataSort
                                        width="100px"
                                    >Multiline</TableHeaderColumn>
                                    <TableHeaderColumn
                                        className="tableHeader"
                                        dataField=""
                                        dataSort
                                        width="100px"
                                    >Delete</TableHeaderColumn>
                                </BootstrapTable>

我不确定这是否是BootstrapTable 错误，但是当存在pull-right 元素时，表格会在具有pull-right 的元素周围创建边框，该元素位于<BootstrapTable> 之前。上面的代码给出了这个：当没有pull-right 时，Button 周围没有 top 边框，这正是我想要的（但Button 应该在右侧）。

当我使用工具检查时，它显示.react-bs-table-container 在Button 和BootstrapTable 周围创建了边框。

但是当我添加这个元素时：

.react-bs-table {
        border-top: none !important;
    }

它只删除顶部边框，而不是 edges：

有没有办法去除<Button> 周围的边框？

【问题讨论】：

标签： css reactjs bootstrap-table

【解决方案1】：

Hm 删除你应该添加的侧边框

   .react-bs-table {
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;

        }

要删除按钮上的边框，您可能需要这样的东西：

button { padding: 0; border: none; background: none;}

【讨论】：

【解决方案2】：

试试这个
边框：无；
边框：0;
边框颜色：透明；
大纲：0;
边框折叠：折叠；（用于主 div）

【讨论】：