BootstrapV4 - 无法将跨度推向右侧

Question

在下面的代码中（这里反应并不重要），我使用了bootstrapV4类＆＃34; text-sm-right＆＃34;。它适用于我的<button>，但对于保留在左侧的post.categories <span>，它并不适用。我无法使其发挥作用，我无法解释它。有人有解释吗？

  renderPosts() {
    return this.props.posts.map((post) => {
      return (
        <li className="list-group-item" key={post.id}>
          <span className="text-sm-right">{post.categories}</span>
          <strong>{post.title}</strong>
        </li>
      );
    });
  }

  render() {
    return (
      <div>
        <div className="text-sm-right post-new-button">
          <Link to="/posts/new" className="btn btn-primary">Add post</Link>
        </div>
        <h3>Posts</h3>
        <ul className="list-group">
          {this.renderPosts()}
        </ul>
      </div>
    );
  }

以下是呈现网站的屏幕截图，按钮位于需要的位置，但左侧的类别仍然存在...

Answer 1

默认情况下，

.list-group-item有display: flex。这意味着您所要做的就是将 justify-content-between-between 类添加到<li>并将您的声明移到最后一行。

您的renderPosts方法应如下所示： renderPosts() { return this.props.posts.map((post) => { return ( <li className="list-group-item justify-content-between" key={post.id}> <strong>{post.title}</strong> <span>{post.categories}</span> </li> ); }); }

您可以在bootstrap documentation

上找到此方法的示例