时间戳

首页 > 解决方案 > 如何在 JSX 中将元素放置在页面底部？

javascript - 如何在 JSX 中将元素放置在页面底部？

问题描述

我想知道如何在 JSX 中实现这一点。我尝试如下使用 CSS 样式，但我想修复底部位置，同时从父级继承左侧。如果我不继承，则容器不会与我的其他组件保持一致。

<div className="container" style={{ position: "fixed", bottom: "10%", left: "want to inherit from parent element here" }}>

将不胜感激任何帮助！谢谢。

标签： javascript

解决方案

  <Router>
    <div
      className="container-fluid"
      style={{
        height: "100vh",
        width: "100%",
        backgroundImage: `url(${world_map})`,
        backgroundSize: "auto",
      }}
    >
      <NavBar />
      <Switch>
        <Route path="/" exact component={MainMenu} />
        <Route path="/services" component={ServicesMenu} />
        <Route path="/autoconnect" component={AutoConnectMenu} />
        <Route path="/gatt" component={GATTMenu} />
        <Route path="/characteristics" component={CharMenu} />
        <Route path="/scan" component={ScanMenu} />
        <Route path="/connect" component={ConnMenu} />
        <Route path="/write" component={WriteMenu} />
        <Route path="/notify" component={NotifyMenu} />
      </Switch>
      <div
        className="container"
        style={{ position: "fixed", bottom: "10px", left: "inherit" }}
      >
        <div className={"alert alert-" + this.state.msgType}>
          <span
            style={{
              fontFamily: "helvetica",
              fontWeight: "bold",
            }}
          >
            Message from Base Station:
          </span>
          {this.state.msg}
        </div>
      </div>
    </div>
  </Router>

推荐阅读