我正在使用http://www.material-ui.com，是否可以根据设备隐藏/显示列？例如，在桌面上，我想显示6列，但在手机上，我可能想要显示3个特定列。怎么做？
答案 0 :(得分：1)
有一个隐藏组件可以完全满足您的要求。 See the documentation。
答案 1 :(得分：0)
您可以根据CSS TableRowColumn查询在隐藏/显示的相应@media和class Example extends React.Component {
render() {
return (
<div>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn className="hidden-xs">Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn>John Smith</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>2</TableRowColumn>
<TableRowColumn>Randal White</TableRowColumn>
<TableRowColumn className="hidden-xs">Unemployed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>3</TableRowColumn>
<TableRowColumn>Stephanie Sanders</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
</TableBody>
</Table>
</div>
);
}
}
元素上指定CSS {{1}}。
为方便起见，我正在使用下面的Bootstrap及其“hidden-xs”CSS类，它提供了这样的媒体查询。当您将浏览器窗口调整到一定宽度以下时，您会看到“状态”列被隐藏。
https://jsfiddle.net/2uepwbd9/1/
{{1}}
答案 2 :(得分：0)
您可以使用reflexbox等网格库。
答案 3 :(得分：0)
我知道我来晚了，但是这个答案是给那些只希望使用Material-UI的人的。 Material-ui提供了theme breakpoints和withWidth HOC。它们都可以用于显示/隐藏设备大小列。 这是example，使用主题断点根据设备宽度更改样式。可以使用相同的概念来隐藏/显示列。