使用Tachyons CSS Toolkit我想将浅蓝色（请参阅下面的代码笔示例）区域直接移动到蓝色导航栏下方。

据我所知，<h1>元素有一个margin-top: 0.67em导致主题标题上方的白色区域。

示例
https://codepen.io/anon/pen/eedwBE

我是前端编程的新手。我已将应用程序的后端制作为 R Shiny 应用程序，并且我正在尝试为此信息进行布局，这需要以 HTML 和 CSS 形式呈现表格数据。

我正在使用Tachyons CSS 库，因为我希望它能让布局设计变得更加容易。

我在他们的文档页面底部使用他们的代码模板示例“三列 - 折叠为单列”：here。这非常有效，但是当我在 div 中放置一个表格时，div 元素突然在页面重新调整大小时重叠。

为了更好地解释这一点，我有以下屏幕截图和两个代码笔的链接。

请注意，由于某种原因，codepen 上的视觉输出看起来与我的浏览器上的不同（见下文），因此可能需要在本地运行，但 HTML 和 CSS 代码可以帮助识别问题）。

div 仅包含数字（不是表格）时的屏幕截图：codepen

• 只包含文本 - 浏览器窗口足够宽以至于它们是全尺寸的

  • 仅包含文本 - 浏览器窗口变窄，以便框挤压在一起

  • 当浏览器窗口变得非常窄时，框会折叠成一列

div中有表格时的截图：codepen

• 当浏览器窗口很大时第一个 div 中有一个表格时（工作正常）

• 但是，当窗口尺寸变小时，框之间会出现重叠

我怎样才能防止这种重叠发生？生成屏幕截图时，我使用的是 firefox 57.0（64 位）。

在过去的两天里，我一直在努力解决这个问题，任何帮助将不胜感激。

谢谢

我正在使用http://tachyons.io/并有一个图标。我只想在小型设备上显示该图标，但当它的横向模式也显示在小型设备上时。由于纵向的屏幕尺寸小于 480 像素，但如果我旋转，它在横向模式下超过 480 像素，这使得它按照 Tachyons 的“中等”尺寸。

我该如何处理这种情况？

我的场景示例：仅在小型设备上显示图标，在中型和大型设备上隐藏图标，在横向模式下 - 在小型设备上显示图标或设置可接受的显示宽度范围。

<div className="dn-ns">这意味着除了小型设备之外的所有设备上都不显示。

我的问题

我正在使用tachyons.io框架来设置 HTML 页面的样式。我想用斜体字体强调一个句子中的一个单词，而不用换行符中断句子流。

手册

手册建议使用<p class="i"></p>，但使用p添加换行符。

我试过什么

除了阅读手册之外，我还尝试使用内部p class="i"或class="i". 前者换行断句，后者没有改变字形。

我的问题

如何在tachyons.io中用斜体强调一个单词，而不用换行符打断句子？

我的网站

我用Tachyons 框架建立了一个会议网站。该页面有一排按钮，应根据页面宽度做出响应。

我的问题

按钮行在整个桌面宽度和窄 (<450 像素) 宽度下看起来很棒，但在 500-700 像素宽范围内失败 - 按钮没有按预期重新排列成两行。这在移动设备中看起来很可怕。

全屏宽度

500-700 像素宽

移动设备（< 450 像素）

代码

我的问题

如何使按钮行完全响应，以便在页面缩小时拆分为 2 行或更多行？

我想创建一个带有徽标的横幅，但是我的图像似乎忽略了其父级的高度。查看这个 JSFiddle以获得我想要实现的示例。

我可以通过添加height: 100%到 img 标签来获得我想要的布局，但是我想使用 tachyons 来做到这一点，而且似乎没有 100% 高度的 tachyons 类。有没有另一种方法来适应 img 使用 tachyons 或者我被迫创建一个类height: 100%？

出于培训目的，我创建了一个 ropo-Friend Web 应用程序作为 csr，现在出于同样的目的，我尝试使用 next.js 重新创建同一个项目，这次作为 ssr 项目的一个很好的工具，我真的做噩梦导入 css 插件像 tachyons 甚至 ./......css 文件，我创建了自己并将其附加到项目中，它不断向我显示错误消息，作为新的下一个开发人员，我无法解决这个问题，我将附上我的错误消息.

我正在用 ReactJs 和Tachyons中的小项目挑战自己，以制作一个像亚马逊一样响应迅速的网站（仅限前端）。

这是亚马逊可以做到但我无法做到的一个例子。

这是全宽的亚马逊页面

亚马逊的半角页面。在这里我们可以看到亚马逊响应并改变了搜索栏的大小。

亚马逊网站的最小浏览器大小。**此处网站的大小保持在 ** 与半宽时相同的大小。

如果您想尝试使用您的网络浏览器，请访问亚马逊

我尝试做同样的事情，但我尝试了很多事情都没有成功，所以我在这里寻求帮助。

目前我正在使用React-Device-Detect来检测设备类型。我没有让网站响应，而是连续两次做同样的工作（一次用于网站，一次用于不同尺寸的移动设备等）。我想亚马逊也做了同样的事情？（在您的手机和 PC 上查看亚马逊，然后在您的 PC 上以最小宽度查看亚马逊，看看它与您的手机不同）

现在我在下面的图片中遇到的问题：

网站全页

网站最小页面。我们可以观察到所有东西都调整了大小，蓝色条的高度降低了，5 列看起来很糟糕

我应该使用 Bootstrap 吗？它是我唯一的解决方案吗？亚马逊是使用 Bootstrap 还是他们有自己的“css 框架”？

我正在使用 tachyons，我无法使用 tachyons 覆盖默认 css。我正在避免自定义 css 我正在粘贴开发人员工具图片，其中也有代码

npm 安装输出：

如何在 package.json 中添加