时间戳

首页 > 解决方案 > 如何在 React html 中调整屏幕大小

html - 如何在 React html 中调整屏幕大小

问题描述

我需要你的帮助。我最近开始 Web 开发，我听说过一些关于网格的东西，但我不明白。我将 react jsx 用于文档。

下图，我想当屏幕 lg 时，它会显示其中的 4 个。我还想将注销按钮带到导航栏的右侧。 在此处输入图像描述

空间均匀，显示：flex 不起作用，我想要行，而不是列： 在此处输入图像描述

我的笔记 CSS 代码：.note {

  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 5px #ccc;
  padding: 10px;
  width: 340px;
  height: 350px;
  margin: 30px auto 20px auto;
  float: left;
  
}

我的导航栏 CSS 代码：

.hero nav {
  background-color: #0ca486;
  border-radius: 1rem;
  padding: 16px 32px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.hero nav button {
  width: 86px;
  padding: 8px 0;
  background: #3a2b58;
}

我在 jsx 中的注销按钮代码：

<nav>
            <h1>ASD</h1>
            <button onClick={handleLogOut}>Logout</button>
          </nav>

标签： htmlcssreactjs

解决方案

如果您是 Web 开发新手，我强烈建议您通读有关 flex 和 grid 的文档https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks .com/snippets/css/complete-guide-grid/

它们非常容易理解，会让您的生活更轻松！

推荐阅读