如何在 REACT 中编辑引导按钮“向右拉”？它没有响应（使用 bootstrap v3）

Question

我试图在我的文章列表中添加按钮。这是为了保存文章。但它不会向右移动。我试过了，它起作用了，但是按钮相互重叠。所以我的方法是把它包裹在一个 div 容器周围，并给那个 div 一个 className=pull-right 。我是新手 - 没有工作。我希望有人能阐明这一点 - 在此先感谢。

import React from "react";
import styles from "../styles/style.css";
const Results = props => {
  return (
    <div className="container fluid">
      {/* line space */}
      <div>Search Results: </div>

      <ul className="list-group">
        {props.results.map(result => {
          return (
            <a href={result.url} onClick={result.handleArticleOnClick}>
              <li className="list-group-item" key={result.id}>
                {result.title}
                <button
                  type="button"
                  className={styles.style}
                  onClick={result.handleSaveArticle}
                >
                  Save this
                </button>
              </li>
            </a>
          );
        })}
      </ul>
    </div>
  );
};

export default Results;

Answer 1

只要清除你的花车。

    <li className="list-group-item clearfix" key={result.id}>
        ...
            <button
              type="button"
              className={`pull-right ${styles.style}`}
              onClick={result.handleSaveArticle}
            >

Answer 2

把 li 标签变成弹性盒子怎么样：

li{
  display: flex;
  justify-content: space-between; 
}

<a>
  <li>
     <div>Some text</div>
     <button type="button">
       Save this
      </button>
  </li>
</a>

如果您使用的是 Bootstrap V4

import React from "react";
import styles from "../styles/style.css";
const Results = props => {
  return (
    <div className="container fluid">
      {/* line space */}
      <div>Search Results: </div>

      <ul className="list-group">
        {props.results.map(result => {
          return (
            <a href={result.url} onClick={result.handleArticleOnClick}>
              <li className="list-group-item d-flex justify-content-between" key={result.id}>
                {result.title}
                <button
                  type="button"
                  className={styles.style}
                  onClick={result.handleSaveArticle}
                >
                  Save this
                </button>
              </li>
            </a>
          );
        })}
      </ul>
    </div>
  );
};

export default Results;