Bootstrap 不充当 3 网格布局

Question

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用 flexbox 构建的，并且是完全响应的。

我正在尝试使用引导程序创建一个 3 网格布局。到目前为止，这是我的代码：

.box-logo-padding a {
  display: inline-block;
  margin: 0px auto;
}
      
@media only screen and (min-width: 360px) and (max-width: 1199px) {
  .box-logo-padding a {
    display: flex;
    margin: 0px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

<div class="experience-section section-padding bg-gray" id="experience">
  <div class="container container-wide">
    <div class="row">
      <div class="col-lg-5 col-sm-12" data-aos="fade-right">
          <div class="sidebar">
              <div class="section-title-one sidebar__inner">
                  <div class="section-title-one-inner">
                    <p>Lorem ipsum </p>

                    <div class="row align-items-center text-center mt-20">
                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                            <a href="#" target="_blank" id="item1"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                            <a href="#" target="_blank" id="item2"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item3"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item4"></a>
                        </div>
                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                             <a href="#" target="_blank" id="item5"></a>
                        </div>

                        <div class="col-lg-4 col-sm-12 box-logo-padding">
                              <a href="#" target="_blank" id="item6"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>




    
      

这会返回：

而不是这个：

如您所见，它不是 3 网格布局，而是在大视口上显示 100% 宽度。这里的问题是，在大视口上它应该显示 3 个网格列布局，然后在中等屏幕上它应该显示两个网格布局和一个小网格布局。知道是什么原因造成的以及如何解决吗？

Answer 1

是的，Bootstrap 是基于 flexbox 构建的，但是它遵循 mobile-first approach。在使用 Bootstrap-4 及以上版本时，我们必须牢记移动设计。并从小屏幕开始，根据更大的屏幕尺寸更改我们的类。

这是您需要做的更改。

CODEPEN 链接： https://codepen.io/emmeiWhite/pen/xxEogNj

完整的工作代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="experience-section section-padding bg-gray" id="experience">
  <div class="container container-wide">
    <div class="row">
      <div class="col-lg-5 col-sm-12" data-aos="fade-right">
          <div class="sidebar">
              <div class="section-title-one sidebar__inner">
                  <div class="section-title-one-inner">
                    <p>Lorem ipsum </p>

                    <div class="row align-items-center text-center mt-20">
                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                            <a href="#" target="_blank" id="item1">Item 1</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                            <a href="#" target="_blank" id="item2">Item 2</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item3">Item 3</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item4">Item 4</a>
                        </div>
                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                             <a href="#" target="_blank" id="item5">Item 5</a>
                        </div>

                        <div class="col-12 col-lg-4 col-md-6 box-logo-padding">
                              <a href="#" target="_blank" id="item6"> Item 6</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

注意：

我们不需要任何媒体查询，因为引导类会处理这些。

另外，请注意您的侧边栏max-width 与大屏幕及以上屏幕的col-lg-5 一样。但是对于小屏幕及以下，侧边栏将是全宽的，具体取决于您的以下类。

<div class="col-lg-5 col-sm-12" data-aos="fade-right">