Question

我使用Bootstrap的网格系统进行了这种响应式设计：

HTML

<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"><a href="javascript:void(0)">ONE</a></div>
                <div class="col-xs-12 col-md-6 panel2"><br><br><a href="javascript:void(0)">TWO</a></div>           
            </div>
        </div>      
    </div>
</div>

CSS

.container {
    max-width:600px;
    overflow:visible;
}
.view {
    border:dashed #333 1px;
}
.row {
    overflow:visible;
}
#panelviewer {
    position:relative;
}
#panelviewer .row {
    white-space:nowrap;
}
.panel1 {
    display:inline-block;
    float:none;
    background:#ccc;
    vertical-align:top
}
.panel2 {
    display:inline-block;
    float:none;
    background:#eee;
    vertical-align:top
}
@media (min-width: 990px) {
    #panelviewer {
        width:671px;
    }
}
.open {
    right:100%;
    margin-left:-34px;
}

我正在尝试创建一个切换效果，将div带入视图中。我似乎无法正确测量。具体来说，我有这些问题：

为什么100％right偏移量与margin-left值相结合而不会将整个div带入视野？
为什么div的宽度不适合父级（仅限桌面）？
为什么两个div之间有4px的差距？

查看（并调整大小）JsFiddle demo，看看我的意思。

Answer 1

您问题的一些答案：

这是因为从Bootstrap CSS
填充是在父级中声明的，当在面板上指定100％宽度时，它们将延伸到父级的内容框宽度，这将排除填充。
这是因为您已将两个元素声明为内联块元素：这意味着浏览器在布局时将它们视为内联元素，并将它们之间的任何空格解释为空格：所以这两个元素被视为两个单独的词。

我建议您重置.row元素的边距和填充，然后不要同时使用left和right位置，请坚持使用。将各个面板声明为块级元素，并使用绝对定位。但是，由于绝对定位会将它们从文档流中取出，因此您需要为父项声明一个显式高度。

.row {
    overflow:visible;
    position: relative;
    width: 100%;
    height: 50px; /* Or any desired value */
    margin: 0;
}
#panelviewer {
    position: relative;
}
.row > div {
    position: absolute;
    width: 100%;
}
.panel1 {
    display: block;
    background: #ccc;
}
.panel2 {
    display: block;
    background: #eee;
    left: 100%;
}
.open {
    left: -100%;
}

http://jsfiddle.net/teddyrised/7HcQ8/6/

Answer 2

根据Terry的回答，我最终取消了父div padding上的view。除了4px空间之外，这使得div成为一致。

然后我使用 hack将其删除：

<div class="row">
   <div class="col-xs-12 col-md-6 panel1">
      <a href="javascript:void(0)">ONE</a>
   </div><!--
--><div class="col-xs-12 col-md-6 panel2">
      <br><br><a href="javascript:void(0)">TWO</a>
   </div>
</div>

See jsfiddle

使用Bootstrap进行响应式设计切换

2 个答案: