Question

我正在使用React.js，Materialise.css和一些MaterialUI组件来创建网站。

我使用 Materialise.css“网格”为我的网站创建了一个标题（React组件，带有标题和注销按钮的基本div）。

问题：我在两个不同的地方使用这个反应组件。在第1位，列的高度与行相同。在第2位，列的高度是行高度的一半。

以下是代码：

作为标题的反应组件

export class Header extends React.Component {
constructor(props) {
    super(props)

}

render() {
    let logoutBtn = <div className="col s2 offset-s2">
        <FlatButton href="/logout/" backgroundColor="#ffffff" hoverColor="#d7d7d7" label="LOGOUT" />
    </div>

    if (this.props.hideLogoutButton) {
        logoutBtn = null
    }

    return (
        <nav className="top-nav">
            <div className="row">
                <div className="col s5 offset-s2">
                        <a className="page-title">{this.props.title}</a>
                </div>
                {logoutBtn}
            </div>
        </nav>
    )
}
}

使用到位1

class Main extends React.Component {
render() {
    return (
        <div>
            <header>
                <Header title="Inspection" />
                <SideBar infolder={true}/>
            </header>
            <div className="content">
                <InspectionSearchView />
            </div>
        </div>
    )
}
}

结果1 result1

使用到位2

class Main extends React.Component {
render() {
    return (
        <div>
            <header>
                <Header title="Portfolio" />
                <SideBar infolder={true}/>
            </header>
            <div className="content">
                <PortfolioSearchView />
            </div>
        </div>
    )
}
}

结果到位2 result2

Answer 1

通常cols不使用周围行的整个高度。导航应设置64px的高度和64px的行高。

默认情况下，它适用于您的标记。

请参阅https://codepen.io/anon/pen/PjKrgK

如果没有，可能会有其他组件或CSS的副作用。然后使用flexbox尝试以下解决方案将cols设置为相同的高度（相等的高度）。

https://github.com/Dogfalo/materialize/blob/d63977599a4efd86820d84fd9c0bf7ca5479744e/dist/css/materialize.css#L3396

https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L68

因为默认情况并非如此： https://codepen.io/anon/pen/mwMZKr

您必须应用一些等高的解决方案，例如flexbox： https://codepen.io/anon/pen/KqvjeR

.col {
  align-items: stretch;
  flex: 1
}
.row {
  background:green;
  display: flex;
}

但imho这看起来不同的东西对你的按钮有副作用。尝试检查按钮，列和行，看看它们会有什么影响。

没有任何CSS代码，只有屏幕截图和正常的HTML标记，有点难以找到导致此行为的确切原因。

Materialize.css列未缩放到完整行高

1 个答案: