在 Bootstrap 中证明 Col 内的内容？答案

【问题标题】：Justify content inside Col in Bootstrap?在 Bootstrap 中证明 Col 内的内容？
【发布时间】：2021-01-13 15:04:04
【问题描述】：

我试图在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;
}

我怎样才能达到效果？

【问题讨论】：

标签： css bootstrap-4 react-bootstrap

【解决方案1】：

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

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

【讨论】：