0

这是我的一个组件的渲染方法：

  render() {
    return (
      <div className="left col-xs-12 col-md-6">
        <Dropdown show={this.state.showDropdown}/>
        {this.props.children}
      </div>
    );
  }

它只是一个带有全屏下拉菜单的 div 和一些子项。时showDropdown===true，显示下拉菜单。现在在使用该组件的其中一个页面中，直接子级的格式存在一些问题，因此我包含了一个padding: 50px. 这解决了这个问题。但是现在我的下拉组件也获得了 50px 的填充，这将我的下拉菜单项向下移动并破坏了下拉的格式 - 但我不知道为什么？这是正常行为吗？

父级的 CSS：

.left {
  display: flex;
  justify-content: center;
  align-items: center;

  // background-color: MediumSpringGreen;
  background-color: $color_left;

  height: auto;
  min-height: 100vh;

  z-index: 1;
  @include media-breakpoint-up(md) {
    height: 100vh;
  }
}

孩子的代码

render() {
  return (
    <div className="row">
    <Loader show={this.state.loading} />
    <Left> 
      <div className="about_padding">
        <p className="red big-box-text-two">Text text text</p>
        <a className="menu-link statementbox" id="menu-statement" href="./pdf/statement.pdf" download="statement.pdf">
          <p className="menu-link-text">our statement</p>
          <img className="img-fluid download-img" src={imgDownload} alt="download"></img>
        </a>
      </div>
    </Left>
}

孩子的CSS：

.statementbox {
  margin-top: 20px !important;
}

.about_padding {
  padding-left: 15%;
  padding-right: 15%;
  //I was trying to add padding-top here, but it also pushes down my Dropdown

  @include media-breakpoint-down(xs) {
    padding-left: 10%;
    padding-right: 10%;
  }
}

下拉代码：

const Dropdown = ({show}) => 
<div className="dropdown"
style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? 1 : 0
        }}>
  <Link to="/">Home</Link>
  <Link to="/menus/">Menus</Link>
  <Link to="/about/">About us</Link>
  <Link to="/contact/">Contact</Link>
</div>

下拉菜单的 CSS：

.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  font-size: 40px; 
  background-color: #FFD826; 
  position: absolute;
  height: 100%; 
  width: 100%;
  z-index: 2;

  a {
    color: #f42528 !important; 
  }
}
4

0 回答 0