如何实现Banner模块横向同行排列？Bootstrap布局问题求助

问题描述 #

无法让Banner模块在同一行显示，相关区块无法横向排列。尝试应用justify-content-between、align-items-center类，也使用了百分比设置，但均无效果，怀疑是样式插入位置有误。

当前代码 #

JSX代码

<section className='home-wrapper-1 py-5'>
      <div className='container-xxl'>
        <div className='row'>

          <div className='col-6'>
            <div className='main-banner-container p-3 position-relative'>
              <img src={require('../images/banners/MSI_GT77_HX_13V.jpg')}
                alt='главный баннер' className='img-field' />
              <div className='main-banner-content position-absolute'>
                <h4>Восхождение легенды!</h4>
                <h5>MSI GT77 HX 13V</h5>
              </div>
              <div className='main-banner-button-price p-6 position-absolute'>
                <Link href='/' type='button' className='btn btn-outline-secondary'>Купить сейчас!</Link>
                <p className='m-0'>305.999₽</p>
              </div>
            </div>
          </div>

            <div className='col-6 d-flex flex-wrap 
            justify-content-between align-items-center'>
              <div className='small-banner-container p-3 position-relative'>
                <img src={require('../images/banners/MSI_GT77_HX_13V.jpg')}
                  alt='главный баннер' className='img-field-small rounded-2' />
                <div className='small-banner-content position-absolute'>
                  <h4>Восхождение легенды!</h4>
                  <h5>MSI GT77 HX 13V</h5>
                </div>
                <div className='small-banner-button-price position-absolute'>
                  <Link href='/' type='button' className='btn btn-outline-secondary'>Купить сейчас!</Link>
                  <p className='m-0'>305.999₽</p>
                </div>
              </div>

          </div>
          
        </div>
      </div>
    </section>

CSS代码

.home-wrapper-1 {
    background-color: rgb(235, 235, 235);
}

.img-field {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.img-field-small {
    height: 140px;
    width: 100%;
    object-fit: cover;
}

.main-banner-container {
    height: 300px;
}

.main-banner-content {
    top: 10%;
    left: 5%
}

.main-banner-content h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-fcf28c);
    margin:  0 0 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.main-banner-content h5 {
    font-size: 38px;
    line-height: 64px;
    letter-spacing: -2px;
    font-weight: 500;
    padding: 0;
    color: black;
    text-transform: none;
}

.main-banner-button-price {
    bottom: 5%;
    left: 5%;
}
.main-banner-button-price a{
    color: white;
    font-size: 20px;
    font-weight: 600;
    border-radius: 15px;
    border: 1px solid var(--color-fcf28c);
    background-color: var(--color-474747);
}
.main-banner-button-price a:hover{
    background-color: var(--color-474747);
    border: 1px solid var(--color-ffe920);
    color: var(--color-ffe920);
}

.main-banner-button-price p{
    font-size: 18px;
    font-weight: 500;
    color: black;
    text-align: center;
}

/* SMALL */
.small-banner-container {
    height: 140px;
}

.small-banner-content {
    top: 10%;
    left: 5%
}

.small-banner-content h4 {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-fcf28c);
    margin:  0 0 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.small-banner-content h5 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -1px;
    font-weight: 500;
    padding: 0;
    color: black;
    text-transform: none;
}

.small-banner-button-price {
    bottom: 5%;
    left: 5%;
}
.small-banner-button-price a{
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--color-fcf28c);
    background-color: var(--color-474747);
}
.small-banner-button-price a:hover{
    background-color: var(--color-474747);
    border: 1px solid var(--color-ffe920);
    color: var(--color-ffe920);
}

.small-banner-button-price p{
    font-size: 14px;
    font-weight: 500;
    color: black;
    text-align: center;
}

当前效果 #

问题分析及解决方案 #

1. 核心布局问题：右侧小Banner的外层容器没有添加Bootstrap的col-6类，导致它默认占满整行，无法和左侧col-6的主Banner同行。给右侧容器添加col-6后，两者会平分row的宽度，自然处于同一行。
2. 类名冲突：原代码中main-banner-content和small-banner-content既用于父容器（图片容器）又用于子容器（文本容器），导致定位样式冲突。重命名父容器类（比如改为main-banner-container和small-banner-container）避免冲突。
3. 图片尺寸适配：原图片设置width:auto可能导致超出容器，改为width:100%并添加object-fit:cover保证图片比例同时填满容器，同时调整小Banner的图片高度适配布局。
4. 文本样式适配：小Banner空间较小，缩小文本和按钮尺寸，避免内容溢出。

内容的提问来源于stack exchange，提问作者sw1art