Bootstrap 屏幕演示需要响应式答案

【问题标题】：Bootstrap screen demo needs to be responsiveBootstrap 屏幕演示需要响应式
【发布时间】：2014-08-15 06:11:29
【问题描述】：

看看这个http://jsfiddle.net/0ftrnkxo/ 和网站http://omarhabash.com/sites

这在桌面上看起来很棒。我通常不会遇到响应式设计的问题，但我可以做些什么来使其具有响应性？

HTML

<div id="g-site1" class="col-xs-12 demo-container">
    <div class="same-s same-1">
        <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
    </div>
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#site1"> <i class="fa fa-search-plus"></i>

    </button>
    <div class="same-s same-2">
        <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="">
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="site1" tabindex="-1" role="dialog" aria-labelledby="site1Label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content1">
            <div class="modal-body">
                <img class="img-responsive site" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="">
            </div>
        </div>
    </div>
</div>

CSS

.same-s {
    height: 160px;
    width: 100%;
    margin: 0 auto;
}
.same-s img {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}
.same-s.same-1 {
    width: 66.5%;
    overflow: scroll;
    position: absolute;
    margin-left: 174px;
    margin-top: 65px;
    height: 57.25%;
}
.demo-container {
    height: 56em;
}
button.btn.btn-primary.btn-lg {
    margin-left: 9.9em;
    margin-top: 26.5em;
    position: absolute;
}
img.site {
    border: 4px solid #ccc;
}

【问题讨论】：

我会先从网格中剥离所有自定义宽度和高度，然后按预期使用它。将您的内容放在网格内并根据需要设置样式/大小。您的大部分元素将保持 100% 宽度并受网格约束。
:/ 我正在尝试一切......似乎没有任何效果。一旦你开始编辑几行 css，你就会看到我的问题。

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

对于任何网格系统，最好将其与您的内容分开。俗话说，不要“破解核心”。这是一个简化的开始：

http://jsfiddle.net/isherwood/0ftrnkxo/3

.demo-container {
    overflow: hidden; /* demo only--accounts for image whitespace */
}
.mac {
    position: relative;
    margin: -5.3% -20.5% 0 -18.5%; /* demo only--accounts for image whitespace */
}
.screen {
    position: absolute;
    top: 9%; /* demo only--accounts for image whitespace */
    right: 17%; /* demo only--accounts for image whitespace */
    left: 15.6%; /* demo only--accounts for image whitespace */
    height: 58%;
    overflow: auto;
}

<div class="row">
    <div class="col-xs-12">
        <div class="demo-container">
            <div class="mac">
                <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/mac.png" alt="" />
                <div class="screen">
                    <img class="img-responsive" src="http://omarhabash.com/sites/assets/img/sites/site1.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

要消除所有这些负边距和.screen 上的相应值，请将您的 Mac 图像裁剪到黑色边框。当然，您仍然需要更小的 top、right 和 left 值以允许 Mac 的框架在其周围显示。

我还会用黑色完全填充 Mac 图像的屏幕。这将消除如此完美地定位覆盖它的东西的需要。

这里是a demo with two Macs in two rows。

【讨论】：