Question

所以我正在设置一个基本的猫头鹰旋转木马，旁边有一个图像，但每次我将页面缩小，它都会将旋转木马放到它下面的线上。这就是我现在所处的位置：

<div class="container-fluid">
    <div class="col-sm-3">
        <div>
          TEST
        </div>
    </div>
    <div class="col-sm-9">
        <div class="owl-carousel">
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
          <div> Your Content </div>
        </div>
    </div>
</div>

并且js非常香草，没有css：

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    loop:true,
    margin: 10,
    items: 3,
    dots: false
  });
});

如何强制两个div保持固定并且比例相等？真正的目标是让一个图像浮动，然后在它旁边滚动三个图像。

Answer 1

为xs设备的cols添加类：

<div class="col-sm-3 col-xs-3">

<div class="col-sm-9 col-xs-9">

Plunk

试图将猫头鹰旋转木马和侧面图像保持在同一条线上

1 个答案: