我有一个一列的引导程序表,每个单元格包含带有文本和按钮的两个div。

在Chrome中,单元格内容按预期呈现在一行中

html - CSS内联块在Firefox中不起作用-LMLPHP

但在Firefox中,单元格内容“分成两行”呈现

html - CSS内联块在Firefox中不起作用-LMLPHP

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;
更改它,也许会有所帮助。

09-25 16:54
查看更多