在响应式设计中并排维护div

作为Bootstrap网格系统的初级用户，我需要使用float:left并排设置两个div，而不管设备如何。这是为了让一个jQuery动画左右移动父母div以将div引入视图。如何构建绿色框的HTML来实现这种效果？或者它纯粹是一个CSS媒体查询的问题？在响应式设计中并排维护div

enter image description here

无视蓝盒子。

这是我到目前为止有：

<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

来源

2014-04-21 greener

还有其他的方法并排保持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/

来源

2014-04-21 23:15:40 Arbel

感谢，它的工作。如果一个比另一个高，我还在'panel'类中加了'vertical-align：top'。 – greener

@greener欢迎您！很高兴为您提供帮助。 – Arbel

我实际上有一个后续行动，如果你想采取刺的话：http://stackoverflow.com/questions/23225022/responsive-design-toggle-using-bootstrap – greener

不管是什么，除非你隐含在媒体查询指定和你的细胞太宽，以适应移动将迫使到两个线。在这种情况下，当它触及移动断点时，会减小内容的大小以适应它。将一类独特的对这些div如class =“sizeSmaller”，这可能助阵：

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

}

调整媒体查询的宽度，以满足您的非执行董事。

来源

2014-04-21 23:10:16 DivineChef

在响应式设计中并排维护div

回答

相关问题