我有一个一列的引导程序表,每个单元格包含带有文本和按钮的两个div。
在Chrome中,单元格内容按预期呈现在一行中
但在Firefox中,单元格内容“分成两行”呈现
jsfiddle
html
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
javascript
var data = [{"id":"973","email":"usr3@usr3.com"},{"id":"17f","email":"prom3@prom3.com"},{"id":"29e","email":"prom8@prom8.com"}];
class TableRowButtons extends React.Component {
constructor(props) {
super(props);
this._handleDeleteClick = this._handleDeleteClick.bind(this);
this._handleResetClick = this._handleResetClick.bind(this);
this._handleEditClick = this._handleEditClick.bind(this);
}
_handleDeleteClick(e){
console.log(e);
}
_handleResetClick(e){
console.log(e);
}
_handleEditClick(e){
console.log(e);
}
render() {
return (
<div className="row-container">
<div className="row-text-container">
{this.props.cellContent}
</div>
<div className="row-buttons-container">
<button className="btn btn-danger btn-xs" onClick={this._handleDeleteClick}>Delete</button>
<button className="btn btn-warning btn-xs" onClick={this._handleResetClick}>Reset Password</button>
<button className="btn btn-info btn-xs" onClick={this._handleEditClick.bind}>Edit</button>
</div>
</div>
);
}
}
class TestTable extends React.Component{
constructor(props) {
super(props);
this._handleEditClick = this._handleEditClick.bind(this);
this._handleResetClick = this._handleResetClick.bind(this);
this._handleDeleteClick = this._handleDeleteClick.bind(this);
this._handleRowClick = this._handleRowClick.bind(this);
}
_handleRowClick(row){
console.log(row);
}
_handleDeleteClick(rowContent){
console.log(rowContent);
}
_handleResetClick(rowContent){
console.log(rowContent);
}
_handleEditClick(rowContent){
console.log(rowContent);
}
render(){
var that = this;
function onAfterTableComplete(){
}
const options = {
onRowClick: this._handleRowClick,
afterTableComplete: onAfterTableComplete
};
function rowFormatter(cell, row){
return <TableRowButtons
cellContent={cell}
rowContent={row}
onDeleteClick={that._handleDeleteClick}
onResetClick={that._handleResetClick}
onEditClick={that._handleEditClick}
/>;
}
return (
<BootstrapTable
data={data}
striped={true}
hover={true}
condensed={true}
pagination={true}
search={true}
options={options}>
<TableHeaderColumn
isKey={true}
dataField="email"
width="200"
dataSort={true}
dataFormat={rowFormatter}>Email</TableHeaderColumn>
</BootstrapTable>
);
}
}
ReactDOM.render(
<TestTable />,
document.getElementById('container')
);
的CSS
.btn-danger {
margin-right: 0;
}
.btn-warning, .btn-info{
margin-right: 5px;
}
td .btn{
float: right;
}
.row-container{
display: inline-block;
width: 100%;
}
.row-container div{
display: inline-block;
}
.row-buttons-container{
float: right;
width: 200px;
}
最佳答案
我看到的问题是white-space: nowrap;
更改它,也许会有所帮助。