html - 使用 Bootstrap 的响应式设计切换

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 带入和带出 View 。我似乎无法正确测量。具体来说，我有这些问题:

1. 为什么 100% right 偏移量与 margin-left 值相结合不会使整个 div 显示在视野中？
2. 为什么 div 的宽度不适合父级(仅限桌面)？
3. 为什么两个 div 之间有 4px 的间距？

查看(并调整大小)JsFiddle demo明白我的意思。

Answer 1

你的问题的一些答案:

1. 这是因为 Bootstrap CSS 中存在影响每个面板位置的负边距
2. 填充在父级中声明，当在面板上指定 100% 宽度时，它们将拉伸(stretch)到父级的内容框宽度，不包括填充。
3. 这是因为您已将这两个元素声明为 inline-block 元素:这意味着浏览器在对它们进行布局时会将它们视为内联元素，并将它们之间的任何空白解释为空格:所以这两个元素被视为两个单独的词。

---

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

.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/