响应设计切换使用Bootstrap [英] Responsive design toggle using Bootstrap

问题描述

我有使用Bootstrap网格系统的响应式设计：

I have this responsive design using Bootstrap's grid system:

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;
}

我正在尝试创建一个切换效果，看法。我似乎不能得到测量正确。具体来说，我有以下问题：

I'm trying the create a toggle effect bringing a div into, and out of, view. I can't seem to the get the measurements right. Specifically, I have these questions:

1. 为什么是100％ right c $>
   
2. 为什么div的宽度不适合父级（桌面）

为什么在两个div之间有4px的差距？请查看（并调整大小） JsFiddle演示，以了解我的意思。

Take a look at (and resize) the JsFiddle demo to see what I mean.

推荐答案

在Terry的回答之后，我最终取消了父div上的 padding $ c> view 。

Following Terry's answer, I ended up doing away with the padding on the parent div view. This brought the divs into line with the exception of the 4px space.

然后我使用<！ - - > hack to remove it：

I then used the <!-- --> hack to remove it:

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

查看jsfiddle

这篇关于响应设计切换使用Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！