在 Bootstrap 中对齐 Col 中的内容？

Question

我试图在 Col 内将 2 个元素一个放在左边，另一个放在右边，并水平对齐它们。我用 justify-self: right; 将 div 放在右边，但它不起作用。我的代码是：

<Col xs="12" className={item.subscription === 'PREMIUM' ? 'mb-1 d-flex justify-content-md-end cursorPointer' : 'mb-1 d-flex justify-content-md-end align-items-end cursorPointer'} >
                { item.subscription === 'PREMIUM' && (
                <div className={`${styles.superDiv}`}>
                  <img
                    src="/svg/e.svg"
                    alt=""
                    height="26"
                    width="26"
                    className="mr-2"
                  />
                  <span className={styles.super}>Super</span>
                </div>
                )}
                <span className={styles.price}>{`${item.price}$`}</span>
                <span className={styles.for}>/H</span>
              </Col>

.superDiv {
    align-content: center;
    text-align: center;
    justify-self: right;
    width: 150px;
    padding: 0.5rem;
    border-radius: 100px;
    background: white;
}

我怎样才能达到这个结果？

Answer 1

通过添加Justify-content:space-between;到父元素第一项在开始行，最后一项在结束行，在这种情况下，您的父元素是订阅，因此：

.subscription {
       display: flex;
      Justify-content: space-between
    }

在 Bootstrap 中对齐 Col 中的内容？

Justify content inside Col in Bootstrap?

css

react-bootstrap

bootstrap-4