在响应式设计中并排保持div

Question

作为Bootstrap网格系统的初学者，无论设备如何，我都需要使用float:left并排保持两个div。 这样，jQuery动画就可以左右移动父div ，以使任一div都可见。 如何构造绿色框的HTML以实现此效果？ 还是纯粹是CSS媒体查询很重要？

忽略蓝色框。

这是我到目前为止的内容：

<div class="container">
    <div class="col-xs-12 col-md-7 view">
        <div id="panelviewer">  
            <div class="row">
                <div class="col-xs-12 col-md-6 panel1">one</div>
                <div class="col-xs-12 col-md-6 panel2">two</div>
            </div>
        </div>
    </div>
</div>

的jsfiddle

Answer 1

还有其他方法可以使div并排并实现您所需要的：

#panelviewer .row {white-space:nowrap;}
.panel1       {display:inline-block;float:none;background:#aaa;}
.panel2       {display:inline-block;float:none;background:#eee;}

演示 http://jsfiddle.net/7HcQ8/3/

Answer 2

除非您在媒体查询中隐式指定，并且单元格太宽而无法容纳移动设备，否则它将强制执行两行操作。 在这种情况下，当碰到移动断点时，请减小内容的大小，以使其适合。 在这些DIV上放置一个唯一的类，例如class =“ sizeSmaller”，这可能会有所帮助：

   @media (max-width: 768px) {
    .sizeSmaller {
   height:50%;
    width:50%;
  }

}

调整媒体查询的宽度以适合您的需求。