在响应式设计中并排维护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%;
  }

}

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