navbar-fixed-top показать содержимое за Navbar

Как вы предотвращаете, чтобы содержимое плавало за Navbar при прокрутке?navbar-fixed-top показать содержимое за Navbar

<Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}>

Или в:

<Nav className="navigation"..

Благодарности

источник

2015-09-01 Chris G.

я впадающих в это тоже. Я нашел следующий (базовый бутстрап) page, который показывает фиксированную навигационную панель и показывает, что главная страница отображается правильно под ней. Кажется, это функция css, которую они используют. В частности:

padding-top: 70px;

Я добавил

body { 
    padding-top: 70px; 
}

в мой файл CSS, и это, кажется, работает. Очевидно, что пробег может варьироваться, не применим на всех территориях и т. Д. Мне нужно будет проверить его дальше для себя, но это может заставить вас начать.

источник

2015-09-27 13:34:54 aperkins

Это приятно, если вам не нужна отзывчивость. Для гибкого дизайна вы должны динамически определять высоту Navbar и настраивать «padding-top» в соответствии с текущим значением высоты Navbar. – jmarceli

Чтобы получить отзывчивое покрытие для тела, вы можете использовать sth. как это (например ES6):

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import { Navbar, Nav, NavItem } from 'react-bootstrap'; 

export default class Template extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { navHeight: 50 }; 

    this.handleResize = this.handleResize.bind(this); 
    } 

    handleResize(e = null) { 
    this.setState({ navHeight: ReactDOM.findDOMNode(this._navbar).offsetHeight }); 
    } 

    componentDidMount() { 
    window.addEventListener('resize', this.handleResize); 
    this.handleResize(); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('resize', this.handleResize); 
    } 

    render() { 
    return (
     <body style={{paddingTop: this.state.navHeight}}> 
     <Navbar ref={(e) => this._navbar = e} fixedTop> 
      <Navbar.Header> 
      <Navbar.Brand> 
       <Link to="/">Some title</Link> 
      </Navbar.Brand> 
      </Navbar.Header> 
      <Nav> 
      <NavItem eventKey={1} href="/link1">Link1</NavItem> 
      <NavItem eventKey={2} href="/link2">Link2</NavItem> 
      </Nav> 
     </Navbar> 
     <main> 
      {this.props.children} 
     </main> 
     </body> 
    ); 
    } 
} 

Template.propTypes = { 
    navHeight: React.PropTypes.number, 
    children: React.PropTypes.object, 
};

Таким образом, ваш <body> обивка-топ всегда будет соответствовать вашей высоте NavBar даже после добавления новых ссылок в мобильном режиме. Я также предполагаю, что высота основания 50px (см. Конструктор), но это не имеет значения, если вы звоните this.handleResize() в componentDidMount().

источник

2016-06-29 16:14:27 jmarceli

navbar-fixed-top показать содержимое за Navbar

ответ

Смежные вопросы