css - 删除 Bootstrap 表的顶部边框和边缘

Question

react 代码:

<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 周围没有顶部 边框这正是我想要的(但 Button 应该在右侧)。

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

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

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

它只会移除顶部边框，但不会移除边缘:

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

Answer 1

嗯，要删除您应该添加的侧边框

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

        }

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

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