为什么我的右手弯曲柱突然落在左列下方？

Question

当添加（流体）内容时，为什么我的右手弯曲柱突然落在左列下方？

我想要一个固定宽度的左列和一个包含图像滑块（Owl Carousel）的右侧列。

列布局在空白时工作正常，但只要我添加图像滑块，列就会跳到100％宽度并下降到固定列以下。这是奇怪的，因为滑块是响应的，不应该扩展超出它的容器 - 它不是固定的宽度。

请看这个codepen：https://codepen.io/nick-gilbert/pen/wORaOP

我的基本列布局非常简单：

<div class="row">

   <div class="col search-sidebar">
      left
   </div>

   <div class="col">
      right
  </div>

</div>

CSS：

.search-sidebar: {
  flex: 0 0 260px;
}

这是一个显示问题的图像（但最好看看代码集）：

Answer 1

在row元素上添加flex-nowrap类。

默认情况下，row是flex-wrap：wrap，所以当内容大于宽度时，div会堆叠起来。为避免它们堆积，请使用flex-nowrap类引导程序。

查看更新的codepen

<div class="container">

  <div class="row" style="margin-bottom:40px;">
    <div class="col search-sidebar" style="background-color:aquamarine">left</div>

    <div class="col" style="margin-bottom:20px;background-color:pink">right<br /> (works when empty)
    </div>
  </div>

  <div class="row flex-nowrap">

    <div class="col search-sidebar" style="background-color:aquamarine">
      left<br><br>
    </div>

    <div class="col" style="margin-bottom:20px;background-color:pink">
      right<br />Broken when an Image slider loads. This should stay to the right of the green column.
      <br />

      <!--  Demos -->
      <div id="imageCarousel">
        <div id="imageThumbnails" class="owl-carousel owl-theme">

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>
          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175" />
                        </a>
          </div>

          <div class="sliderThumb rounded">
            <a class="galleryLink" rel="Group" href='#'>
                            <img src='http://placehold.it/160x160' width="175" height="175"  />
                        </a>
          </div>

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

  </div>
  <!-- end row -->

</div>