Materialize.css列不縮放到全行高度

我使用React.js，Materialize.css和一些MaterialUI組件來創建網站。Materialize.css列不縮放到全行高度

我爲我的網站創建了一個標題（React組件，帶有標題和註銷按鈕的基本div），使用Materialize.css「grid」。

問題：我在2個不同的地方使用這個反應組分。就位1，列的高度與行相同。就地2，列的高度是該行高度的一半。

下面的代碼：

的1

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

結果代替1- 反應組分，其報頭

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> 
    ) 
} 
}

到位用法210

代替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

來源

2017-05-18 Ni3l5

通常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 t他看起來像不同的東西有你的按鈕的副作用。嘗試檢查按鈕，列和行，看看是什麼影響他們。

沒有任何CSS代碼，只是屏幕截圖和普通的HTML標記，有點難以確定這種行爲的確切原因。

來源

2017-06-24 15:08:10

Materialize.css列不縮放到全行高度

回答

相關問題