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

【问题标题】：Responsive design toggle using Bootstrap使用 Bootstrap 进行响应式设计切换
【发布时间】：2014-04-23 06:32:23
【问题描述】：

我使用 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 以了解我的意思。

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

您的问题的一些答案：

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

我的建议是您重置.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/

【讨论】：

您的解决方案仅适用于文档宽度小于 990 像素（即移动设备）的情况。在桌面上，框 ONE 扩展超出了父 div 的边界，并且工具不会将 TWO 带入视图。
然后改变你的媒体查询来设置父元素的宽度，.container，而不是jsfiddle.net/teddyrised/7HcQ8/7
谢谢。有没有办法不受明确的height 的约束？
高度必须以一种或另一种方式设置——当然您可以探索其他选项来设置它。这取决于你想要什么。

【解决方案2】：

按照特里的回答，我最终取消了父 div view 上的 padding。除了 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

【讨论】：