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

Question

我正在做我的第一个反应。我是JS，HTML，CSS甚至网络应用程序编程的新手。

我想做的是与我的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

使用display flex尝试将其添加到css .btn-toolbar {display：flex;}