javascript - 来自react-bootstrap的ListGroupItem和Button在同一行

Question

我正在制作我的第一个 react 项目。我在 JS、HTML、CSS 甚至 Web 应用程序编程方面都是新手。

我尝试做的是与我的 ListGroupItem 在同一行(有一些边距)显示按钮。

我的代码如下(Project.js):

import React, { Component } from "react";
import { ListGroupItem, Button, ButtonToolbar } from "react-bootstrap";

class Project extends Component {
  render() {
    return (
      <ButtonToolbar>
        <ListGroupItem href="#link1">{this.props.project.name}</ListGroupItem>
        <Button bsStyle="primary">Primary</Button>
      </ButtonToolbar>
    );
  }
}

export default Project;

还有一张图像，我想要做什么:

感谢您的任何建议!如果您还有更多疑问，请在下面评论中留言

编辑:

我添加了

.btn-toolbar {
  display: flex;
}

到我的App.css，现在看起来像这样:

我对此很满意，我喜欢它。但现在，如何使该白条的大小静态？

Answer 1

将其添加到您的 CSS 中:

.btn-toolbar { display: flex; }