在響應式設計中並排保持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%;
  }

}

調整媒體查詢的寬度以適合您的需求。