css - Bootstrap 屏幕演示需要响应

Question

看看这个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;
}

Answer 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 图像裁剪到黑色边框。当然，您仍然需要较小的顶部、右侧和左侧值，以允许 Mac 的框架显示在它周围。

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

这是 a demo with two Macs in two rows .