代码之家 › 专栏 › 技术社区 › GeraltDieSocke

为什么列表中的第一个<hr/>元素没有出现在其他元素使用React引导时?

twitter-bootstrap reactjs

GeraltDieSocke · 技术社区 · 6 年前

问题

我有一个简单的组件列表,用于呈现标题和 <hr /> 列表被正确呈现,每个标题都有对应的 <

下面是一个屏幕截图:

我的项目中没有任何自定义样式,除了这个样式(对于一个名为 Draft.js :

.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ababab;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

下面是呈现列表的代码(它在父级中为我拥有的每个列表项调用):

return (
<div>
  <h2>{props.title}</h2>
  <p>Test</p>
  <hr />
  {renderPosts()}
</div>

);

为什么会这样?我在开发工具和失踪 < 但看起来不太好,实际上是不可见的。这对我来说毫无意义,因为其他人力资源部都在那里。开发工具的屏幕截图:

1 回复 | 直到 6 年前

GeraltDieSocke 6 年前

我发现了问题。这是另一个引导组件,与第一个元素重叠,就像@Gonzalo said。这是来自父组件的错误代码:

return (
  <div style={{ marginTop: 50 }}>
    {/* TODO: implement AddRoom Component */}

    {/* <OverlayTrigger
      trigger="focus"
      placement="top"
      overlay={this.popoverTop()}
    >
      <Button>
        <FontAwesomeIcon icon={faPlus} />
      </Button>
    </OverlayTrigger> */}

    {this.renderRooms()}
  </div>
);

我取消了注释,现在我看到 <hr /> 我想现在我必须 OverlayTrigger

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前