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

对于任何网格系统，最好将它与您的内容分开。正如俗话所说，不要破坏核心＆＃34;。这是一个简化的开始：

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。

Bootstrap屏幕演示需要响应

1 个答案: